<template>
  <dialogBox title="材料明细" width="60%" v-model="value" @closeDialog="closeDialog" :isButton="false">
    <div class="clxx">
        <div class="right">
        <!-- 材料目录明细 -->
        <div class="clmlmx-box">
            <div class="title">申请材料目录</div>
            <lb-table :column="column" :key="key" :heightNum="150" :pagination="false" :data="data">
            </lb-table>
        </div>
        </div>
    </div>
  </dialogBox>
</template>
<script>
import { mapGetters } from "vuex";
import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
export default {
  components: {  },
  props: {
    value: { type: Boolean, default: false },
    data: { type: Array, default: () => {} },
  },
  data () {
    return {
      isDialog: false,
      iclass: "",
      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"])
  },
  created () {

  },
  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);
        clmlInit(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",
      };
      // 接口待调
      move(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",
      }
      // 接口待调
      move(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(() => {
        clmlDelete({ 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;
      }
    },
    closeDialog(){
       this.$emit("input", false);
    },
  },
};
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";

.active {
  background: $light-blue !important;
  color: #fff;
}

.required {
  font-size: 12px;
  color: $pink;
  float: left;
}

.cl_number {
  float: right;
}

.clxx {
  width: 100%;
  display: flex;
  padding-left: 5px;
  height: calc(100vh - 125px);

  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      width: 28px;
      height: 49%;
      @include flex-center;
      background-color: #E4E7ED;
      border-bottom-right-radius: 10px;
      padding: 5px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        @extend .active;
      }
    }
  }

  .right {
    width: 100%;
    height: 100%;

    .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;
      }
    }

    .clyl-box {
      width: 100%;
      height: 100%;
      display: flex;

      .menu-tree {
        width: 20%;
        min-width: 160px;
        height: 100%;
        margin-right: 10px;
        border-right: 1px dotted #d9d9d9;
        padding: 0 15px;


        .item {
          line-height: 30px;
          padding-top: 5px;
          border-bottom: 1px solid #e8e8e8;
          font-size: 16px;
          text-align: center;
          color: $light-blue;

          .itemIcon {
            float: right;
            line-height: 60px;
            cursor: pointer;
          }

          .child {
            line-height: 32px;
            border-bottom: 1px solid #e8e8e8;
            padding-left: 10px;
            color: #6b6b6b;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 6px;
            line-height: 20px;
            transition: all 0.3s;
            padding: 8px 0;
          }

          .child:hover {
            color: $light-blue;
            transform: scale(1.1);
          }

          .checked {
            border: 1px solid $light-blue;
            color: $light-blue;
          }
        }
      }

      .clyl-img {
        width: 75%;
        height: 100%;
        background: #f3f4f7;
        margin: 0 auto;
        position: relative;
      }
    }
  }
}
</style>