<template>
  <div class="recordContrast">
    <div class="left">
      <div class="leftTitle" style="display: flex;align-items: center;justify-content: space-between">
        <div>单据类型</div>
        <div class="icon" style="cursor: pointer" @click="rightAddHandle()">
          <i class="el-icon-plus"></i>
        </div>
      </div>
      <div class="showList">
        <div class="showItem" v-for="(item,index) in billTypeList" :key="index"
             :class="{active:item.id === billTypeClickID}" @click="billTypeClickHandle(item.id,item.name)"
        >
          <div class="name">{{ item.name }}</div>
          <div class="icon">
            <i class="el-icon-edit" @click.stop="editRightTitle(item)" style="margin-right: 10px"></i>
            <i class="el-icon-delete" style="color: red" @click.stop="delRightTitle(item)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="topBox">
        <div class="searchBox">
          <div>
            <el-input v-model="searchObj.sourceAppName" :placeholder="'来源应用'" @keydown.native.enter="resetTable"
                      clearable
            ></el-input>
          </div>
          <div>
            <el-input v-model="searchObj.targetAppName" :placeholder="'目标应用'" @keydown.native.enter="resetTable"
                      clearable
            ></el-input>
          </div>
          <div>
            <el-input v-model="searchObj.sourceAppCode" :placeholder="'来源应用编码'" @keydown.native.enter="resetTable"
                      clearable
            ></el-input>
          </div>
          <div>
            <el-input v-model="searchObj.targetAppCode" :placeholder="'目标应用编码'" @keydown.native.enter="resetTable"
                      clearable
            ></el-input>
          </div>
          <div class="btnBox">
            <el-button type="primary" size="small" icon="el-icon-search" @click="resetTable">查询</el-button>
            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refresh">重置</el-button>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: flex-end;">
          <el-button
              size="small"
              :icon="item.icon"
              @click="clickSave(item)"
              :type="item.type ? item.type : 'primary'"
              v-for="(item, index) in nowBtns"
              :key="index"
          >{{ item.menuName }}
          </el-button>
        </div>
      </div>
      <div class="table">
        <base-table ref="customtable" :showIndex="false" :slotrow="true"
                    tableHeight="calc(100vh - 170px)" :tableData="tableData" :tableColumn="tableColumn"
                    @radioChange="radioChange" id="printMe"
        >
        </base-table>

      </div>
      <div class="page">
        <base-page :pageSizesList="[20,50,100,150]" :pageModel.sync="pageModel" @onPageChange="pageChange"
                   layout="total, sizes,prev, pager, next,jumper"
        ></base-page>
      </div>
    </div>
    <base-right-dialog
        @handleClose="examineOperateDialog = false"
        @handleConfirmClick="handleConfirmClick"
        :dialogVisible="examineOperateDialog"
        size="900px"
        :appendBody="true"
        :loading="true"
        :footerShow="true"
        :submitShow="true"
        :title="dialogTitle +'档案对照'"
        submitTitle="保存"
    >
      <div class="rightDialogClass_main" style="background-color: #fff;" v-if="examineOperateDialog">
        <base-form
            ref="basicFormRefsName"
            :formRow="basicFormForm"
            :isFunBtn="false"
            :spanWidth="'100px'"
            justifyContent="flex-end"
            :rules="basicFormRulers"
            @onSelect="onSelect"
            :view-status="statusView"
        >
        </base-form>

      </div>
    </base-right-dialog>
    <base-dialog
        :dialogVisible.sync="passwordDialogShow"
        :closeModal="false"
        :footerShow="true"
        :title="passwordDialogTitle+'单据类型'"
        width="400px"
        top="20vh"
        @handleConfirmClick="passwordChangeHandle"
    >
      <div class="rightDialogClass_main" style="background-color: #fff;">
        <div class="addDialog">
          <div class="nameTitle">单据类型名称：</div>
          <el-input v-model="billTypeADDName"></el-input>
        </div>

      </div>
    </base-dialog>
  </div>
</template>


<script>
import {
  DelArcCompareDataAPI,
  DelArcTypeDataAPI,
  GetArcCompareList,
  GetArcCompareListAPI,
  GetArcTypeListAPI,
  GetBillListAPI,
  GetLoginUserButtonsAPI, SaveArcCompareDataAPI, SaveArcTypeDataAPI
} from '@/api/apis/buttonList'
import basePage from '@/components/base/basePage/index.vue'
import baseChoice from '@/components/base/baseChoice/index.vue'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'

export default {
  name: 'recordContrast',
  components: { baseDialog, baseChoice, basePage },
  data() {
    return {
      basicFormForm: [
        {
          elCol: [
            {
              label: '档案类型',
              prop: 'arcTypeName',
              tag: 'elInput',
              span: 24,
              disabled: true,
              placeholder: '自动带出'
            },
            {
              label: '来源应用编码',
              prop: 'sourceAppCode',
              tag: 'elInput',
              span: 12,
              disabled: true,
              placeholder: '自动带出'
            },
            {
              label: '来源应用名称',
              prop: 'sourceAppID',
              tag: 'elSelect',
              options: [],
              span: 12,
              placeholder: '请选择'
            },
            {
              label: '来源数据名称',
              prop: 'sourceDataName',
              tag: 'elInput',
              span: 12,
              placeholder: '请输入'
            },
            {
              label: '来源数据编码',
              prop: 'sourceDataCode',
              tag: 'elInput',
              span: 12,
              placeholder: '请输入'
            },
            {
              label: '目标应用编码',
              prop: 'targetAppCode',
              tag: 'elInput',
              span: 12,
              disabled: true,
              placeholder: '自动带出'
            },
            {
              label: '目标应用名称',
              prop: 'targetAppID',
              tag: 'elSelect',
              options: [],
              span: 12,
              placeholder: '请选择'
            },
            {
              label: '目标数据名称',
              prop: 'targetDataName',
              tag: 'elInput',
              span: 12,
              placeholder: '请输入'
            },
            {
              label: '目标数据编码',
              prop: 'targetDataCode',
              tag: 'elInput',
              span: 12,
              placeholder: '请输入'
            }

          ]
        }
      ],
      basicFormRulers: {
        sourceAppCode: [
          { required: true, message: '请选择来源应用', trigger: 'change' }
        ],
        sourceAppID: [
          { required: true, message: '请选择来源应用', trigger: 'change' }
        ],
        sourceDataName: [
          { required: true, message: '请输入来源数据名称', trigger: 'blur' }
        ],
        sourceDataCode: [
          { required: true, message: '请输入来源数据编码', trigger: 'blur' }
        ],
        targetAppCode: [
          { required: true, message: '请选择目标应用', trigger: 'change' }
        ],
        targetAppID: [
          { required: true, message: '请选择目标应用', trigger: 'change' }
        ],
        targetDataName: [
          { required: true, message: '请输入目标数据名称', trigger: 'blur' }
        ],
        targetDataCode: [
          { required: true, message: '请输入目标数据编码', trigger: 'blur' }
        ]
      },
      nowBtns: [],
      billTypeName: '',
      billTypeClickID: '',
      billTypeClickName: '',
      billTypeList: [
        {
          name: '人员对照',
          id: 1
        },
        {
          name: '人员对照',
          id: 2
        },
        {
          name: '人员对照',
          id: 3
        },
        {
          name: '人员对照',
          id: 4
        }
      ],
      searchObj: {},
      pageModel: {
        page: 1, //当前页码
        limit: 20 //每页显示多少
      },
      selected: [],

      tableColumn: [
        {
          label: '档案类型',
          prop: 'arcTypeName',
          width: '150px'
        },
        {
          label: '来源应用',
          prop: 'sourceAppName',
          width: '150px'
        },
        {
          label: '来源数据编码',
          prop: 'sourceDataCode',
          width: '150px'
        },
        {
          label: '来源数据名称',
          prop: 'sourceDataName'
        },
        {
          label: '目标应用',
          prop: 'targetAppName',
          width: '150px'
        },
        {
          label: '目标数据编码',
          prop: 'targetDataCode',
          width: '150px'
        },
        {
          label: '目标数据名称',
          prop: 'targetDataName'
        }
      ],
      tableData: [],
      dialogTitle: '新增',
      examineOperateDialog: false,
      statusView: false,
      passwordDialogShow: false,
      passwordDialogTitle: '新增',
      billTypeADDName: '',
      billTypeADDID: ''
    }
  },
  methods: {
    delRightTitle(item) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await DelArcTypeDataAPI({
          arcTypeID: item.id
        })
        if (res.code == 1) {
          this.$vmNews('删除成功', 'success')
          this.billTypeClickName = ''
          this.billTypeClickID = ''
          this.getLeftList()
          this.resetTable()
        }
      })
    },
    editRightTitle(item) {
      this.billTypeADDName = item.name
      this.billTypeADDID = item.id
      this.passwordDialogTitle = '编辑'
      this.passwordDialogShow = true
    },
    rightAddHandle() {
      this.passwordDialogShow = true
      this.passwordDialogTitle = '新增'
      this.billTypeADDName = ''
      this.billTypeADDID = ''
    },
    async passwordChangeHandle() {
      if (!this.billTypeADDName) {
        this.$vmNews('请输入单据类型名称')
        return
      }
      let params = {
        dataMain: {
          'arcTypeName': this.billTypeADDName
        }
      }
      if (this.passwordDialogTitle === '编辑') {
        params.dataMain.arcTypeID = this.billTypeADDID
      }
      const res = await SaveArcTypeDataAPI(params)
      if (res.code == 1) {
        this.$vmNews('保存成功', 'success')
        this.passwordDialogShow = false
        this.getLeftList()
      }
    },
    async getSelect() {
      const res = await GetBillListAPI({
        page: 1,
        limit: 9999
      })
      res.data[1].forEach(item => {
        item.label = item.appName
        item.value = item.appID
      })
      this.basicFormForm[0].elCol[2].options = res.data[1]
      this.basicFormForm[0].elCol[6].options = res.data[1]
    },
    async getLeftList() {
      const res = await GetArcTypeListAPI({
        arcTypeName: this.billTypeName
      })
      res.data[0].forEach((el) => {
        el.name = el.arcTypeName
        el.id = el.arcTypeID
      })
      this.billTypeList = res.data[0]
    },
    onSelect(val, index, indexRow, obj, row, form) {
      if (row.prop === 'sourceAppID') {
        this.$set(this.$refs.basicFormRefsName.ruleForm, 'sourceAppCode', obj.appCode)
      }
      if (row.prop === 'targetAppID') {
        this.$set(this.$refs.basicFormRefsName.ruleForm, 'targetAppCode', obj.appCode)
      }
    },
    async handleConfirmClick() {
      await this.$refs.basicFormRefsName.$refs.ruleForm.validate()
      const res = await SaveArcCompareDataAPI({
        dataMain: {
          ...this.$refs.basicFormRefsName.ruleForm
        }
      })
      if (res.code == 1) {
        this.$vmNews('保存成功', 'success')
        this.examineOperateDialog = false
        this.resetTable()
      }
    },
    pageChange(model) {
      this.pageModel.page = model.page
      this.pageModel.limit = model.limit
      this.getTableData()
    },
    async getTableData() {
      const res = await GetArcCompareList({
        ...this.pageModel,
        ...this.searchObj,
        arcTypeID: this.billTypeClickID
      })
      this.pageModel.total = res.data[0]
      this.tableData = res.data[1]
      this.$nextTick(() => {
        this.$refs.customtable.clearRadioIndex()
        this.selected = []
      })
    },
    resetTable() {
      this.tableData = []
      this.pageModel.page = 1
      this.selected = []
      this.getTableData()
    },
    // 点击某条数据
    radioChange(val) {
      this.selected = []
      this.selected.push(val)
    },
    // 删除
    delOperate() {
      if (!this.selected.length) {
        this.$vmNews('请至少选择一条数据')
        return
      }
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await DelArcCompareDataAPI({
          arcCompareID: this.selected[0].arcCompareID
        })
        if (res.code == 1) {
          this.$vmNews('删除成功', 'success')
          this.resetTable()
        }
      })
    },
    // 编辑
    editOperate() {
      if (!this.selected.length) {
        this.$vmNews('请至少选择一条数据')
        return
      }
      this.dialogTitle = '编辑'
      this.examineOperateDialog = true
      this.$nextTick(() => {
        this.$refs.basicFormRefsName.ruleForm = {
          ...this.selected[0]
        }
      })
    },
    //新增
    Operate() {
      if (!this.billTypeClickName) {
        this.$vmNews('请选择单据类型')
        return
      }
      this.dialogTitle = '新增'
      this.examineOperateDialog = true
      this.$nextTick(() => {
        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeName', this.billTypeClickName)
        this.$set(this.$refs.basicFormRefsName.ruleForm, 'arcTypeID', this.billTypeClickID)
      })
    },
    refresh() {
      this.searchObj = {}
    },
    //获取按钮（头部）
    async buttonPermissions() {
      const res = await GetLoginUserButtonsAPI({
        page: 1, //当前页码
        limit: 999, //每页显示多少
        menuId: this.$route.meta.id, //树形分类id
        Sequence: '', //排列方式
        SequenceName: '', //需要排列的字段名
        route: this.$route.path
      })
      if (res.code == 1) {
        res.data[0].forEach((el) => {
          el.menuName = el.nameCN
          el.icon = el.icoName
          el.type = el.style
          el.name = el.nameCN
        })
        this.nowBtns = res.data[0]
      }
    },
    billTypeClickHandle(id, name) {
      this.billTypeClickID = id
      this.billTypeClickName = name
      this.resetTable()
    },
    //头部按钮统一调用方法
    clickSave(item) {
      this[item.btnFunction]()
    }
  },
  mounted() {
    this.buttonPermissions()
    this.getLeftList()
    this.getTableData()
    this.getSelect()
  }
}
</script>


<style scoped lang="scss">
.addDialog {
  display: flex;
  align-items: center;

  .nameTitle {
    padding: 10px;
    font-size: 14px;
    color: #333;
    margin-right: 10px;
    width: 180px;
    text-align: right;
  }
}

.recordContrast {
  display: flex;
  overflow: hidden;
  background-color: #f5f5f5;

  .left {
    width: 270px;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 5px;

    .leftTitle {
      color: #333;
      font-size: 18px;
      font-weight: 500;
    }
  }

  .right {
    flex: 1;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;

    .topBox {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .searchBox {
        display: flex;
        align-items: center;

        > div {
          margin-right: 10px;
        }
      }
    }

    .table {
      margin-top: 10px;
    }
  }
}

.searchBtn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;

  .input {
    flex: 1;
    margin-right: 5px;
  }
}

.showList {
  height: calc(100vh - 200px);
  overflow: auto;
  margin-top: 10px;

  .showItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    cursor: pointer;

    .icon {
      display: none;
    }

    &:hover {
      background-color: #ebeced;
      border-radius: 4px;

      .icon {
        display: block !important;
      }
    }

    &.active {
      background-color: #ebeced !important;
    }
  }
}
</style>
