<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-13 10:18:32
-->
<template>
  <div class="clmlmx-box">
    <div style="text-align:right">
      <el-button type="primary" icon="el-icon-top">上移</el-button>
      <el-button type="primary" icon="el-icon-bottom">下移</el-button>
    </div>
    <lb-table :column="column" :key="key" :heightNumSetting="true" :calcHeight="600"
      :pagination="false" :data="tableData">
    </lb-table>
    <div class="text-center">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading" v-if="formData.ableOperation && tableData.length>0">保存</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Sortable from 'sortablejs'
  import store from '@/store/index.js'
  import { InitClml, updateClml } from "@/api/clxx.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        loading: false,
        column: [
          {
            label: "选择",
            type: 'selection'
          },
          {
            prop: "isrequired",
            label: "是否必选",
            width: "80",
            render: (h, scope) => {
              if (scope.row.isrequired === "1") {
                return (
                  <div>
                    <span>必选</span>
                  </div>
                );
              }
              else {
                return (
                  <div>
                    <span>可选</span>
                  </div>
                )
              }
            }
          },
          {
            label: "材料名称",
            render: (h, scope) => {
              return (
                (this.formData.ableOperation && scope.row.isrequired != '1') ?
                  <el-input value={scope.row.sjmc} onInput={(val) => { scope.row.sjmc = val }}></el-input> : <span>{scope.row.sjmc}</span>
              )
            }
          },
          {
            label: "材料类型",
            width: "110",
            render: (h, scope) => {
              return (
                this.formData.ableOperation ?
                  <el-select value={scope.row.sjlx}
                    onChange={(val) => { scope.row.sjlx = val }}>
                    {
                      store.getters.dictData['A40'].map(option => {
                        return (
                          <el-option label={option.dname} value={option.dcode}></el-option>
                        )
                      })
                    }
                  </el-select> : <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
              )
            }
          },
          {
            prop: "sjsl",
            label: "收件数量",
            width: "80",
            render: (h, scope) => {
              return (
                (this.formData.ableOperation) ?
                  <el-input value={scope.row.sjsl} onInput={(val) => { scope.row.sjsl = val }}></el-input> : <span>{
                    scope.row.sjsl
                  }</span>
              )
            }
          },
          {
            label: "扫描时间",
            width: "140",
            render: (h, scope) => {
              return (
                <span>{scope.row.sjsj}</span>
              )
            }
          },
          {
            label: "页数",
            width: "60",
            render: (h, scope) => {
              if (scope.row.ys && scope.row.ys > 0) {
                return (
                  <div>
                    <span>{scope.row.ys}</span>
                  </div>
                );
              } else {
                return (
                  <div>
                    <span>0</span>
                  </div>
                );
              }
            },
          },
          {
            label: "操作",
            width: "100",
            render: (h, scope) => {
              return (
                <div>
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    disabled={scope.row.ys == 0 || !this.formData.ableOperation}
                    onClick={() => {
                      this.handleDelete(scope.$index, scope.row);
                    }}
                  >
                    删除
                  </el-button>

                </div >
              )
            }
          }
        ],
        key: 0,
        tableData: []
      }
    },
    watch: {
      'formData.data': {
        handler: function (val, oldVal) {
          this.tableData = _.cloneDeep(val)
        },
        immediate: true,
        deep: true
      }
    },
    mounted () {
      this.initSort()
    },
    methods: {
      handleSubmit () {
        this.loading = true
        updateClml(this.tableData).then(res => {
          this.loading = false
          if (res.code == 200) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$popupCacel()
            store.dispatch('user/reWorkFresh', true)
          }
        }).catch(() => {
          this.loading = false
        })
      },
      /**
       * @description: 材料目录明细初始化
       * @author: renchao
       */
      clmlInitList () {
        return new Promise(resolve => {
          this.unitData = this.$parent.unitData;
          var formdata = new FormData();
          formdata.append("bsmSlsq", Vue.prototype.$currentRoute.query.bsmSlsq);
          if (Vue.prototype.$currentRoute.query.sqywbm == "DJBBL") {
            formdata.append("bsmSldy", this.formData.bsmRepair);
            formdata.append("clfl", 3);
          } else {
            formdata.append("bsmSldy", this.formData.unitData[0]?.bsmSldy);
            formdata.append("clfl", 2);
          }
          InitClml(formdata).then((res) => {
            if (res.code == 200) {
              resolve(res.code)
              if (res.result && res.result.length > 0) {
                this.tableData = res.result;
              } else {
                this.tableData = []
              }
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },
      /**
       * @description: 材料目录删除
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      handleDelete (index, row) {
        if (row.children.length > 0) {
          this.$message.error('页数存在不可删除');
          return
        }
        let that = this
        this.$confirm('此操作将永久删除该 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      initSort () {
        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        // const sortable = new Sortable(el, options);
        // 根据具体需求配置options配置项
        const sortable = new Sortable(el, {
          onEnd: (evt) => { // 监听拖动结束事件
            console.log(this) // this是当前vue上下文
            console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
            console.log(evt.newIndex) // 当前行的被拖拽后的顺序
            // 这里就可以写我们需要传给后台的逻辑代码
            // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
            // 下面将拖拽后的顺序进行修改
            const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
            this.tableData.splice(evt.newIndex, 0, currRow)
            const newData = []
            this.tableData.forEach((item, index) => {
              newData[index] = {
                id: item.id,
                rank: index + 1
              }
            })
            // 下面是将排序结果更新到数据库中，根据自己项目的逻辑进行实现即可。
            const data = {
              id: this.$route.params.id,
              datas: {
                streams: newData
              }
            }
            this.$store
              .dispatch('user/setMultiSort', data)
              .then((res) => {
                if (res.code === 200) {
                  this.$message.success('排序修改成功')
                  // 修改成功后重新获取列表数据更新
                  this.getMultiLiveList()
                } else {
                  this.$message.error('排序修改失败')
                }
              })
              .catch((e) => {
                console.log(e)
              })
          }
        })
      }
    }
  }
</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>