<template>
  <div class="clmlmx-box">
    <div class="title">申请材料目录</div>
    <lb-table :column="column" :key="key" :heightNum="150" :pagination="false" :data="formData.data">
    </lb-table>
    <div class="text-center">
      <el-button @click="$popupCacel">取消</el-button>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  import { InitClml, saveClml, deleteSjClml, moveClml } from "@/api/clxx.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        column: [
          {
            width: "50",
            renderHeader: (h, scope) => {
              return (
                <div>
                  {
                    ''
                  }
                </div>
              )
            },
            render: (h, scope) => {
              return (
                <div>
                  {
                    this.$route.query.viewtype || scope.row.sfxjcl == '0' ? <span>{ }</span> :
                      <i class="el-icon-minus pointer"
                        onClick={() => {
                          this.handleDelete(scope.$index, scope.row);
                        }}
                      ></i>
                  }
                </div>
              )
            }
          },
          {
            width: "50",
            label: '序号',
            render: (h, scope) => {
              return <span>{scope.$index + 1}</span>
            }
          },
          {
            prop: "isrequired",
            label: "是否必选",
            width: "50",
            render: (h, scope) => {
              if (scope.row.sfxjcl === "1") {
                return (
                  <div>
                    <span>可选</span>
                  </div>
                );
              }
              else {
                return (
                  <div>
                    <span>必选</span>
                  </div>
                );
              }
            },
          },
          {
            prop: "sjmc",
            label: "材料名称",
          },
          {
            prop: "sjlx",
            label: "材料类型",
            width: "80",
            render: (h, scope) => {
              return (
                <div>
                  <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
                </div>
              );
            },
          },
          {
            prop: "sjsl",
            label: "份数",
            width: "50"
          },
          {
            prop: "smzt",
            label: "扫描状态",
            width: "80",
            render: (h, scope) => {
              if (scope.row.children && scope.row.children.length > 0) {
                return (
                  <div>
                    <span>已扫描</span>
                  </div>
                );
              } else {
                return (
                  <div>
                    <span>未扫描</span>
                  </div>
                );
              }
            },
          },
          {
            label: "扫描页数",
            width: "50",
            render: (h, scope) => {
              if (scope.row.children && scope.row.children.length > 0) {
                return (
                  <div>
                    <span>{scope.row.children.length}</span>
                  </div>
                );
              } else {
                return (
                  <div>
                    <span>0</span>
                  </div>
                );
              }
            },
          },
          {
            label: "操作",
            width: "80",
            render: (h, scope) => {
              return (
                <div>
                  <el-button
                    type="text"
                    disabled={scope.$index == 0}
                    onClick={() => {
                      this.moveUpward(scope.$index, scope.row);
                    }}
                  >
                    上移
                  </el-button>
                  <el-button
                    type="text"
                    disabled={scope.$index + 1 == this.tableData.length}
                    onClick={() => {
                      this.moveDown(scope.$index, scope.row);
                    }}
                  >
                    下移
                  </el-button>
                </div>
              );
            },
          },
        ],
        key: 0,
        tableData: []
      }
    },
    computed: {
      ...mapGetters(["dictData"])
    },
    methods: {
      // 材料目录明细初始化
      clmlInitList () {
        return new Promise(resolve => {
          this.unitData = this.$parent.unitData;
          var formdata = new FormData();
          formdata.append("bsmSldy", this.unitData[0]?.bsmSldy);
          formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
          InitClml(formdata).then((res) => {
            if (res.code == 200) {
              resolve(res.code)
              if (res.result && res.result.length > 0) {
                this.data = res.result;
              } else {
                this.data = []
              }
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },
      // 上移
      moveUpward (index, row) {
        let obj = {
          xh: row.xh,
          bsmSlsq: row.bsmSlsq,
          moveDirection: "UP",
        };
        // 接口待调
        moveClml(obj).then(async (res) => {
          if (res.code == 200) {
            let res = await this.clmlInitList()
            if (res == 200) {
              this.$message({
                message: '上移成功',
                type: 'success'
              })
              this.$parent.setTableData(this.data)
            }
          } else {
            this.$message.error(res.message);
          }
        })
      },
      // 下移
      moveDown (index, row) {
        let obj = {
          xh: row.xh,
          bsmSlsq: row.bsmSlsq,
          moveDirection: "DOWN",
        }
        // 接口待调
        moveClml(obj).then(async (res) => {
          if (res.code == 200) {
            let res = await this.clmlInitList()
            if (res == 200) {
              this.$message({
                message: '下移成功',
                type: 'success'
              })
              this.$parent.setTableData(this.data)
            }
          } else {
            this.$message.error(res.message);
          }
        })
      },
      // 材料目录删除
      handleDelete (index, row) {
        let that = this
        this.$confirm('此操作将永久删除该 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSjClml({ sjBsm: row.bsmSj }).then(async (res) => {
            if (res.code == 200) {
              let res = await that.clmlInitList()
              if (res == 200) {
                that.$message({
                  message: "删除成功",
                  type: "success",
                })
                this.$parent.setTableData(this.data)
              }
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 字典
      dicStatus (val, code) {
        let data = this.$store.getters.dictData[code],
          name = "暂无";
        if (data) {
          data.map((item) => {
            if (item.dcode == val) {
              name = item.dname;
            }
          });
          return name;
        }
      }
    }
  }
</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>