<template>
  <div class="RCSbox">
    <OperateCard
      class="cleft"
      width="200px"
      show-fold
      :icon-left-list="iconLeftList"
      :icon-right-list="iconRightList"
      :form-list="formSelectList"
      :operate-card-tree-attrs="operateCardTreeAttrs"
      @handleNodeClick="handleNodeClick"
    >
      按用户维度</OperateCard>

    <div class="cright">
      <FormSearch
        :form-arr="searchArr"
        :form-data="searchData"
        @outOperation="searchOutOperation"
        @searchSubmit="searchSubmit"
        @reset="searchResetForm"
      />
      <PublicTable
        ref="tableRef"
        row-key="statusDesc"
        :loading="loading"
        :has-index="false"
        :table-data="tableData"
        :table-info="tableInfo"
        :table-column="columns"
        :events="events"
        :btn-button="operations"
        :has-operation="false"
        :is-need-pagination="true"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :total="total"
        :operated-string="operatedString"
        :is-need-customcolumn="false"
        :table-top-button="tableTopButton"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        @customColumnChange="handleCustomColumnChange"
        @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
        @handleTableTopColumncheckChange="handleTableTopColumncheckChange"
        @handleTableTopColumnRowcheckChange="handleTableTopColumnRowcheckChange"
      />
    </div>

    <el-dialog
      title="账户详情"
      :visible.sync="visible"
      width="500px"
    >
      <div>
        <PublicForm
          ref="PublicFormRef"
          :form-arr="formArr"
          :form-data="formData"
        />
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="visible = false"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="visible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PublicTable from '@/components/table';
import FormSearch from '@/components/formSearch';
import OperateCard from '@/components/operateCard';
import PublicForm from '@/components/form';
import mockData from './mockData';
import mockData2 from './mockData2';
export default {
  components: {
    PublicTable,
    FormSearch,
    PublicForm,
    OperateCard,
  },
  data() {
    return {
      // 左侧select/tree 选择项
      iconLeftList: [],
      iconRightList: [],
      formSelectList: mockData,
      operateCardTreeAttrs: {
        'default-expand-all': true,
      },
      // add edit form modal
      visible: false,
      formArr: [{
        type: 'input',
        prop: 'input1',
        attrs: {
          label: '编码',
          needStar: true,
        },
        rules: { required: true, message: '请输入文本' },
      },
      {
        type: 'input',
        prop: 'input2',
        attrs: {
          label: '短名',
          needStar: true,
        },
        rules: { required: true, message: '请输入文本' },
      },
      {
        type: 'input',
        prop: 'input3',
        attrs: {
          label: '名称',
        },
      }, {
        type: 'select',
        prop: 'input4',
        attrs: {
          label: '类型',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input5',
        attrs: {
          label: '损益货币',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input6',
        attrs: {
          label: '上级机构',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input7',
        attrs: {
          label: '级别',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input8',
        attrs: {
          label: '运营机构',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }, {
        type: 'select',
        prop: 'input4',
        attrs: {
          label: '锁定',
          needStar: true,
        },
        options: [],
        rules: { required: true, message: '请选择' },
      }],
      formData: {},
      // search
      searchArr: [
        {
          type: 'select',
          prop: 'input1',
          span: 8,
          attrs: {
            label: '用户',
          },
          options: [],
        },
        {
          type: 'select',
          prop: 'input2',
          span: 8,
          attrs: {
            label: '账户',
          },
          options: [],
        },
      ],
      searchData: {},
      // table
      loading: false,
      tableData: mockData2,
      columns: [
        {
          prop: 'check',
          width: '50px',
          align: 'center',
          label: '',
          tableTopColumnCheck: true,
          tableTopColumnCheckValue: false,
        },
        {
          prop: 'code',
          align: 'center',
          label: '账户',
          render: (h, params) => {
            return h('div', [
              h('a', {
                domProps: {
                  innerHTML: params.row.code,
                },
                style: {
                  cursor: 'pointer',
                  color: '#f00',
                },
                on: {
                  click: () => {
                    console.log(123123);
                  },
                },
              }),
            ]);
          },
        },
        {
          prop: 'foldersLocalName',
          align: 'center',
          label: '名称',
          tableTopColumnIcon: 'el-icon-s-home', // 列表头图标
        },
        {
          prop: 'queryRight',
          width: '130px',
          align: 'center',
          label: '查询',
          tableTopColumnCheck: true,
          tableTopColumnCheckValue: false,
        },
        {
          prop: 'addRight',
          width: '130px',
          align: 'center',
          label: '新增',
          tableTopColumnCheck: true,
          tableTopColumnCheckValue: false,
        },
        {
          prop: 'updateRight',
          width: '130px',
          align: 'center',
          label: '修改',
          tableTopColumnCheck: true,
          tableTopColumnCheckValue: false,
        },
        {
          prop: 'deleteRight',
          width: '130px',
          align: 'center',
          label: '删除',
          tableTopColumnCheck: true,
          tableTopColumnCheckValue: false,
        },
        {
          prop: 'internalDealRight',
          width: '130px',
          align: 'center',
          label: '内部',
          tableTopColumnCheck: true,
          tableTopColumnCheckValue: false,
        },
      ],
      operatedString: '',
      tableTopButton: [
        {
          text: '保存',
          type: 'primary',
          class: 'el-text-color',
          callback: (value) => {
            this.handleSave(value);
          },
        },
      ],
      // pagenation
      searchParams: {
        pageNum: 1,
        pageSize: 20,
      },
      total: 100,
    };
  },
  async mounted() {
    // this.queryPage();
  },
  methods: {
    handleNodeClick(node) {
      console.log('node', node);
    },
    searchSubmit(val) {
      console.log('search结果', val);
    },
    searchResetForm() {
      this.formData = {};
    },
    searchOutOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.searchParams.pageNum = pageNum;
    },
    handleCustomColumnChange(val) {
    },
    handleTableTopColumnIconClick(val, index) {
      this.operatedString = '我是计算了之后的字符串';
      console.log('当前列 ', val);
    },
    handleTableTopColumncheckChange(column, index, val) {
      this.columns[index].tableTopColumnCheckValue = val;
      // 第一列
      if (index === 0) {
        console.log('column', column);

        if (val) {
          this.tableData.forEach((item) => {
            item.check = true;
            item.addRight = true;
            item.queryRight = true;
            item.updateRight = true;
            item.deleteRight = true;
            item.internalDealRight = true;
          });
          this.columns[3].tableTopColumnCheckValue = true;
          this.columns[4].tableTopColumnCheckValue = true;
          this.columns[5].tableTopColumnCheckValue = true;
          this.columns[6].tableTopColumnCheckValue = true;
          this.columns[7].tableTopColumnCheckValue = true;
        } else {
          this.tableData.forEach((item) => {
            item.check = false;
            item.addRight = false;
            item.queryRight = false;
            item.updateRight = false;
            item.deleteRight = false;
            item.internalDealRight = false;
          });
          this.columns[3].tableTopColumnCheckValue = false;
          this.columns[4].tableTopColumnCheckValue = false;
          this.columns[5].tableTopColumnCheckValue = false;
          this.columns[6].tableTopColumnCheckValue = false;
          this.columns[7].tableTopColumnCheckValue = false;
        }
      } else {
        if (val) {
          this.tableData.forEach((item) => {
            item[this.columns[index].prop] = true;
          });
        } else {
          this.tableData.forEach((item) => {
            item[this.columns[index].prop] = false;
          });
        }
      }
    },
    handleTableTopColumnRowcheckChange(column, index, val) {
      if (index === 0) {
        if (val) {
          this.tableData[column.$index].addRight = true;
          this.tableData[column.$index].queryRight = true;
          this.tableData[column.$index].updateRight = true;
          this.tableData[column.$index].deleteRight = true;
          this.tableData[column.$index].internalDealRight = true;
        } else {
          this.tableData[column.$index].addRight = false;
          this.tableData[column.$index].queryRight = false;
          this.tableData[column.$index].updateRight = false;
          this.tableData[column.$index].deleteRight = false;
          this.tableData[column.$index].internalDealRight = false;
        }
      }
    },
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
    },
    handleSelectionAllChange(val) {
      console.log('多选事件All ', val);
    },
    async queryPage() {
      const params = {
        modelName: 'pubCurrency',
        grpType1: 'CU',
        queryParam: {
          grpid: '',
          code: '',
          pageStart: this.searchParams.pageNum,
          pageLimit: this.searchParams.pageSize,
        },
      };
      const res = await this.$apis.queryPage(params);
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
        this.$message.success('请求成功');
      }
    },
    handleSave() {
      // this.visible = true;
      console.log('this.tableData', this.tableData);
    },
  },
};
</script>

<style lang="scss" scoped>
.RCSbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  .cright {
    flex: 1;
    width: 800px;
    margin-left: 12px;
  }
}
</style>
