<template>
  <div>
    <base-dialog
      :dialogVisible.sync="screen"
      title="选择个人查看方案"
      width="70%"
      :footerShow="true"
      @handleConfirmClick="determinePersonalPlan"
    >
      <div class="screen">
        <div class="left" v-loading="leftLoading">
          <span class="title">全部字段({{allField.length}})</span>
          <el-checkbox-group v-model="personalPlan">
            <el-checkbox
              :label="item.label"
              v-for="(item, index) in allField"
              :key="index"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="right" v-loading="rightLoading">
          <span class="title">显示字段({{ personalPlan.length }})</span>
          <base-table
            :showIndex="true"
            :tableColumn="option"
            :tableData="details"
            :sortableSwitch="true"
            tableHeight="472px"
          >
            <template v-slot:align="{ row }">
              <el-select v-model="row.align" placeholder="请选择">
                <el-option
                  v-for="item in align"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <template v-slot:showLength="{ row }">
              <el-input v-model="row.showLength" type="number"></el-input>
            </template>
            <template v-slot:isCanSort="{ row }">
              <el-switch
                :inactive-value="false"
                :active-value="true"
                v-model="row.isCanSort"
              ></el-switch>
            </template>
            <template v-slot:color="{ row }">
              <el-color-picker v-model="row.color"></el-color-picker>
            </template>
            <template v-slot:opeare="{ row }">
              <i
                class="el-icon-delete"
                style="color: red"
                @click="delTable(row)"
              ></i>
            </template>
          </base-table>
        </div>
      </div>
    </base-dialog>
  </div>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTable from "@/components/base/baseTable";
import {
  GetDataSourcePerson,
  BillMachineGetDataSource,
  BillMachineSaveDataSource,
} from "@/api/apis/documentManagement";
export default {
  data() {
    return {
      screen: false,
      leftLoading: false,
      rightLoading: false,
      personalPlan: [],
      details: [],
      allField: [],
      align: [
        { label: "居中", value: "center" },
        { label: "左对齐", value: "left" },
        { label: "右对齐", value: "right" },
      ],
      option: [
        {
          label: "字段名称(中文)",
          prop: "columnNameCN",
          tooltip: true,
        },
        {
          label: "字段名称",
          prop: "columnNameEN",
          tooltip: true,
        },
        {
          label: "宽度",
          prop: "showLength",
          tooltip: true,
          width: 80,
        },
        {
          label: "排序",
          prop: "isCanSort",
          tooltip: true,
          width: 65,
        },
        {
          label: "对其方式",
          prop: "align",
          tooltip: true,
        },
        {
          label: "颜色",
          prop: "color",
          tooltip: true,
          width: 60,
        },
        {
          label: "操作",
          prop: "opeare",
          tooltip: true,
          width: 50,
        },
      ],
    };
  },

  watch: {
    personalPlan(newVal, oldVal) {
      let data = [];
      if (this.standard) {
        newVal.forEach((el) => {
          let item = this.allList.filter((e) => {
            return el === e.columnNameCN;
          });
          if (item.length > 0) {
            data.push(item[0]);
          }
        });
        this.details = data;
      }
    },
  },

  props: {
    id: {
      type: Number,
      required: true,
    }
  },

  components: {
    baseDialog,
    baseTable,
  },

  computed: {},

  mounted() {},

  methods: {
    // 保存个人查看方案
    async determinePersonalPlan() {
      const res = await BillMachineSaveDataSource({
        type: "1",
        billKindID: this.id,
        dataSourceCoulmn: this.details,
      });
      if (res.code == 1) {
        this.screen = false;
        this.$message({
          message: "保存个人查看方案成功",
          type: "success",
        });
        this.$emit('Refresh');
      }
    },
    async init() {
      this.leftLoading = true;
      this.rightLoading = true;
      const dataList = await BillMachineGetDataSource({
        billKindID: this.id,
        type: "0",
      });
      if (dataList.code == 1) {
        this.allList = dataList.data[0];
      }
      const res = await BillMachineGetDataSource({
        billKindID: this.id,
        type: "1",
      });
      if (res.code == 1) {
        this.standard = res.data[0];
        this.personalPlan = [];
        this.standard.forEach((el) => {
          this.personalPlan.push(el.columnNameCN);
        });
        setTimeout(() => {
            this.rightLoading = false;
        },500)
      }
      let data = [];
      this.personalPlan.forEach((el) => {
        let item = this.standard.filter((e) => {
          return el == e.columnNameCN;
        });
        data.push(item[0]);
      });
      this.details = data;

      const el = await GetDataSourcePerson({ billKindID: this.id });
      if (el.code == 1) {
        this.tableColumn = el.data[1].length == 0 ? el.data[0] : el.data[1];
        this.allField = el.data[0];
        this.tableColumn.forEach((el) => {
          el.tooltip = true;
          // el.width = el.span
        });
        this.personalPlan = [];
        if (el.data[1].length != 0) {
          el.data[1].forEach((el) => {
            this.personalPlan.push(el.label);
          });
        } else {
          el.data[0].forEach((el) => {
            this.personalPlan.push(el.label);
          });
        }
        this.leftLoading = false
      }
    },
    delTable(el) {
    	this.$delConfirm().then(res => {
    		this.personalPlan.splice(this.personalPlan.findIndex(item => item == el.columnNameCN),1)
    	})
    },
  },
};
</script>
<style scoped lang="scss">
.screen {
  display: flex;
  .left {
    .title {
      display: block;
      padding: 10px;
      border-bottom: 1px solid #f5f5f5;
    }
    width: 20%;
    border: 1px solid #f5f5f5;
    ::v-deep .el-checkbox-group {
      display: flex;
      flex-direction: column;
      margin: 10px 0 10px 10px;
      max-height: 450px;
      overflow-y: auto;
    }
  }
  .right {
    .title {
      display: block;
      padding: 10px;
      border-bottom: 1px solid #f5f5f5;
    }
    width: 80%;
    .package {
      margin: 10px 0 10px 10px;
      max-height: 450px;
      overflow-y: auto;
      .mainBody {
        margin-bottom: 7px;
      }
    }
  }
}
</style>
