<template>
  <div>
    <EMSTableNew
      ref="paymentTable"
      :server="server"
      :autoFirst="false"
      action="getPaymentTableDatas"
      :params="searchForm"
      :columnsFn="accounGroupColumns"
      :onSelectionChange="selectionChangeCallback"
    >
      <Form
        ref="searchForm"
        slot="search-bar"
        :model="searchForm"
        :label-width="120"
      >
        <Row>
          <Col span="6">
          <Form-item
            prop="ouCode"
            label="核算机构"
          >
            <SelectCompany
              v-model="searchForm.ouCode"
              :filterable="true"
              :flag="true"
              transfer
              clearable
            />
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="isBillEnable"
            label="已启用票据平台"
          >
            <DataSelect
              v-model="searchForm.isBillEnable"
              code="YES_NO"
              transfer
              clearable
              @loadFinish="loadedVsYesNo"
            >
            </DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="isAutoCreatePaymentPublic"
            label="对公自动创建"
          >
            <DataSelect
              v-model="searchForm.isAutoCreatePaymentPublic"
              transfer
              clearable
              code="YES_NO"
              @loadFinish="loadedVsYesNo"
            >
              >
            </DataSelect>
          </Form-item>
          </Col>

          <Col
            v-show="!showMore"
            span="6"
          >
          <div class="search_btns ivu-form-item">
            <Button
              type="warning"
              class="ems-btn-medium ems-btn-type1"
              style="padding: 0 18px;"
              @click.native="search"
            >
              {{ $t("查询") }}
            </Button>
            <Button
              class="ems-btn-medium ems-btn-type3"
              style="padding: 0 18px;"
              @click.native="reset"
            >
              {{ $t("重置") }}
            </Button>
            <a @click="changeShowMore">{{ $t('查看更多') }}</a>
          </div>
          </Col>

          <Col span="6">
          <Form-item
            prop="isAutoCreatePaymentPrivate"
            label="对私自动创建"
          >
            <DataSelect
              v-model="searchForm.isAutoCreatePaymentPrivate"
              transfer
              clearable
              code="YES_NO"
              @loadFinish="loadedVsYesNo"
            >
              >
            </DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="isCapitalPlanEnable"
            label="是否启用资金计划预占"
          >
            <DataSelect
              v-model="searchForm.isCapitalPlanEnable"
              transfer
              clearable
              code="YES_NO"
              @loadFinish="loadedVsYesNo"
            >
              >
            </DataSelect>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="manualChnName"
            label="手工操作用户"
          >
            <Input
              v-model="searchForm.manualChnName"
              type="text"
              maxlength="30"
              placeholder="用户名称"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col
            v-show="showMore"
            span="12"
          >
          <div class="search_btns ivu-form-item">
            <Button
              type="warning"
              class="ems-btn-medium ems-btn-type1"
              style="padding: 0 18px;"
              @click.native="search"
            >
              {{ $t("查询") }}
            </Button>
            <Button
              class="ems-btn-medium ems-btn-type3"
              style="padding: 0 18px;"
              @click.native="reset"
            >
              {{ $t("重置") }}
            </Button>
            <a @click="changeShowMore">{{ $t('隐藏条件') }}</a>
          </div>
          </Col>
        </Row>
      </Form>

      <!-- <div slot="handle-bar">
        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ $t('查询') }}
        </Button>
        <Button
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div> -->

      <div slot="table-bar">
        <Button
          type="warning"
          icon="close-round"
          :disabled="delDisabled"
          @click="del()"
        >
          删除
        </Button>
        <Button
          type="warning"
          icon="plus-round"
          @click="add()"
        >
          新增
        </Button>
        <Button
          type="warning"
          icon="edit"
          :disabled="batchDisabled"
          @click="editBatch('2')"
        >
          批量修改
        </Button>
        <Button
          type="warning"
          icon="android-delete"
          :disabled="batchDisabled"
          @click="delBatch()"
        >
          批量删除用户权限
        </Button>
      </div>
    </EMSTableNew>
  </div>
</template>
<script>
import AddPayment from './components/AddOrEditPaymentPermission.vue';
import DelEmployeePermission from './components/DelEmployeePermission.vue';
import { SelectCompany } from '@paymentPlatformComps/index.js';
import Server from './server.js';
const server = new Server();
let vm;
export default {
  name: 'PaymentPlatformSetting',
  components: {
    SelectCompany
  },
  directives: {},
  data() {
    return {
      server: server,
      searchForm: {
        ouCode: '', // 核算机构
        isBillEnable: '', // 已启用票据平台
        isAutoCreatePaymentPublic: '', // 对公自动创建付款准备
        isAutoCreatePaymentPrivate: '', // 对私自动创建付款准备
        isCapitalPlanEnable: '', // 是否启用资金计划预占
        manualChnName: '' // 手工操作用户
      },
      searchData: {},
      selection: [], // 多选结果
      yesNoData: {
        valueMap: {}
      }, // 是、否 值集
      showMore: false
    };
  },
  computed: {
    selCompanyCodes() {
      const ids = [];

      this.selection.map(item => {
        ids.push(item.ouCode);
      });

      return ids;
    },
    delDisabled() {
      return this.selection.length < 1;
    },
    batchDisabled() {
      return this.selection.length < 2;
    },
    // 列表显示 是、否
    coverEnabelToTxt() {
      return function(key) {
        return this.yesNoData.valueMap[key];
      };
    }
  },
  watch: {},
  created: function() {
  },
  beforeMount: function() {},
  mounted: function() {
    vm = this;
    this.search(1);
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    changeShowMore() {
      this.showMore = !this.showMore;
      this.$refs.paymentTable.showMore();
    },
    // 新增
    add() {
      new this.$sidelipPage(
        AddPayment,
        {
          props: {
            companys: []
          }
        },
        () => {
          this.search(1);
          this.selection = [];
        }
      );
    },

    // 编辑
    edit(company) {
      new this.$sidelipPage(
        AddPayment,
        {
          props: {
            companys: company instanceof Array ? company : [company]
          }
        },
        () => {
          this.search(company ? '' : 1);
          this.selection = [];
        }
      );
    },

    // 删除 可批量
    del() {
      const selCompanyCodes = this.selCompanyCodes;
      if (!selCompanyCodes.length) {
        return this.$Message.warning('请选择要删除的数据！');
      }
      if (selCompanyCodes.length == 1) {
        server.singleDelete(selCompanyCodes).then(res => {
          console.log(res);
          if (res.statusCode !== '-1') {
            this.$Message.success(res.data.msg);
            this.search(1);
          } else {
            this.$Message.error(res.data.msg);
          }
        });
      } else if (selCompanyCodes.length > 1) {
        server.delSettingBatch(selCompanyCodes)
          .then(res => {
            console.log(res);
            if (res.statusCode !== '-1') {
              this.$Message.success(res.data.msg);
              this.search(1);
            } else {
              this.$Message.error(res.data.msg);
            }
          });
      }
    },

    // 批量修改
    editBatch() {
      const selection = this.selection;

      if (selection.length < 2) {
        return this.$Message.warning({
          content: '批量修改需要勾选多条数据，单个修改请点击‘编辑’！',
          duration: 4
        });
      }

      console.log('editBatch', selection);

      this.edit(selection);
    },

    // 批量删除用户权限
    delBatch() {
      const selCompanyCodes = this.selCompanyCodes;

      console.log('selCompanyCodes', selCompanyCodes);

      if (selCompanyCodes.length < 2) {
        return this.$Message.warning({
          content: '批量操作需要勾选多条数据，单个操作请点击‘编辑’！',
          duration: 4
        });
      }

      new this.$sidelipPage(
        DelEmployeePermission,
        {
          props: {
            companyCodes: selCompanyCodes
          }
        },
        () => {
          this.search(1);
          this.selection = [];
        }
      );
    },

    // 表头字段定义
    accounGroupColumns() {
      return [
        {
          title: '多选',
          type: 'selection',
          align: 'center',
          // fixed: 'left',
          width: 60
        },
        {
          // title: this.$t("module.menuTemplate.templateCode"),
          title: '操作',
          align: 'left',
          // sortable: "custom",
          width: 60,
          render: (h, params) => {
            return h('RowTools', {
              props: {
                data: [
                  {
                    text: '编辑',
                    handle: () => {
                      vm.edit(params.row);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: '核算机构',
          align: 'left',
          key: 'ouName',
          // sortable: "custom",
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.ouName
                }
              },
              params.row.ouName
            );
          }
        },
        {
          title: '已启用票据平台',
          align: 'left',
          key: 'isBillEnable',
          width: 200,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.isBillEnable == '1' ? '是' : '否'
                }
              },
              params.row.isBillEnable == '1' ? '是' : '否'
            );
          }
        },
        {
          title: '对公自动创建付款准备',
          align: 'left',
          key: 'isAutoCreatePaymentPublic',
          // sortable: "custom",
          width: 230,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.isAutoCreatePaymentPublic == '1' ? '是' : '否'
                }
              },
              params.row.isAutoCreatePaymentPublic == '1' ? '是' : '否'
            );
          }
        },
        {
          title: '对私自动创建付款准备',
          align: 'left',
          key: 'isAutoCreatePaymentPrivate',
          width: 230,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.isAutoCreatePaymentPrivate == '1' ? '是' : '否'
                }
              },
              params.row.isAutoCreatePaymentPrivate == '1' ? '是' : '否'
            );
          }
        },
        {
          title: '是否启用资金',
          align: 'left',
          key: 'isCapitalPlanEnable',
          // width: 190,
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.isCapitalPlanEnable == '1' ? '是' : '否'
                }
              },
              params.row.isCapitalPlanEnable == '1' ? '是' : '否'
            );
          }
        },

        {
          title: '付款准备手工操作用户',
          align: 'left',
          key: 'manualChnNameList',
          // sortable: "custom",
          resizable: true,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class: 'ivu-table-cell-ellipsis',
                  title: params.row.manualChnNameList ? params.row.manualChnNameList.join(',') : ''
                }
              },
              params.row.manualChnNameList ? params.row.manualChnNameList.join(',') : ''
            );
          }
        }
      ];
    },

    // 将YES or NO转换成1或0
    conversionToNum(data) {
      for (const key in data) {
        if (data[key] == 'YES') {
          data[key] = '1';
        } else if (data[key] == 'NO') {
          data[key] = '0';
        }
      }
      this.searchData = data;
    },
    // 搜索
    search(page) {
      // const data = this.searchForm;
      this.conversionToNum(this.searchForm);
      this.$refs.paymentTable.load(this.searchData, page);
    },
    // 重置
    reset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.groupDeptId = '';
      this.search(1);
    },
    // 多选回调
    selectionChangeCallback(selection) {
      console.log(selection);
      this.selection = selection;
    },

    // 是、否 值集 valueList数据 反显值valueMap
    loadedVsYesNo(val) {
      this.yesNoData = val;
    }
  }
};
</script>
