<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-15 15:38:53
-->
<template>
  <div class="clmlmx-box">
    <lb-table :column="column" :key="key" row-key="bsmMaterial" ref="listTable" :heightNumSetting="true" :calcHeight="500" :pagination="false"
      :data="tableData">
    </lb-table>
    <div class="text-center">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">保存</el-button>
    </div>
  </div>
</template>
<script>
  import store from '@/store/index.js'
  import Sortable from 'sortablejs'
  import { ywPopupCacel } from "@/utils/popup.js";
  import { editCompanyMaterialList } from "@/api/company.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        loading: false,
        sortable: null,
        column: [
          {
            label: "材料名称",
            render: (h, scope) => {
              return (
                <el-input value={scope.row.clmc} onInput={(val) => { scope.row.clmc = val }}></el-input>
              )
            }
          },
          {
            label: "材料编码",
            render: (h, scope) => {
              return (
                <el-input value={scope.row.clbm} onInput={(val) => { scope.row.clbm = val }}></el-input>
              )
            }
          },
          {
            label: "材料类型",
            width: "110",
            render: (h, scope) => {
              return (
                <el-select value={scope.row.cllx}
                  onChange={(val) => { scope.row.cllx = val }}>
                  {
                    store.getters.dictData['A40'].map(option => {
                      return (
                        <el-option label={option.dname} value={option.dcode}></el-option>
                      )
                    })
                  }
                </el-select>
              )
            }
          },
          {
            label: "页数",
            width: "80",
            render: (h, scope) => {
              if (scope.row.count && scope.row.count > 0) {
                return (
                  <div>
                    <span>{scope.row.count}</span>
                  </div>
                );
              } else {
                return (
                  <div>
                    <span>0</span>
                  </div>
                );
              }
            },
          },
          {
            label: "操作",
            width: "100",
            render: (h, scope) => {
              return (
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  disabled={scope.row.count != 0}
                  onClick={() => {
                    this.handleDelete(scope.$index, scope.row);
                  }}
                >
                  删除
                </el-button>
              )
            }
          }
        ],
        key: 0,
        tableData: []
      }
    },
    mounted () {
      this.initSort()
      this.tableData = _.cloneDeep(this.formData.data)
    },
    beforeDestroy () {
      if (this.sortable) {
        this.sortable.destroy();
      }
    },
    watch: {
      'formData.data': {
        handler: function (val, oldVal) {
          this.tableData = _.cloneDeep(val)
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleCancel () {
        ywPopupCacel()
      },
      handleSubmit () {
        this.loading = true
        store.dispatch('user/reWorkFresh', false)
        editCompanyMaterialList(this.tableData, this.formData.bsmCompany).then(res => {
          this.loading = false
          if (res.code == 200) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            store.dispatch('user/reWorkFresh', true)
            ywPopupCacel()
          }
        }).catch(() => {
          this.loading = false
        })
      },
      /**
       * @description: 材料目录删除
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      initSort () {
        const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost',
          setData: function (dataTransfer) {
            dataTransfer.setData('Text', '')
          },
          onEnd: evt => {
            const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
            this.tableData.splice(evt.newIndex, 0, targetRow);
          }
        })
      }
    }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/mixin.scss";
  .clmlmx-box {
    margin: 0 auto;
    .title {
      text-align: center;
      height: 60px;
      line-height: 60px;
      border: 1px solid #dfe6ec;
      font-size: 20px;
      background: #81d3f81a;
      margin-bottom: -1px;
    }
  }
</style>