<template>
  <el-container>
    <el-row class="header">
      <el-button type="primary" @click="addRules">添加规则</el-button>
    </el-row>

    <div class="ruleContent" ref="ruleContent">
      <el-table
        ref="multipleTable"
        :data="checkDetail"
        border
        :max-height="tableMaxHeight"
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="是否检查"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-radio v-model="scope.row.isCheck" :label="1">是</el-radio>
            <el-radio v-model="scope.row.isCheck" :label="0">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkContent"
          label="检查项"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <div class="morerow" v-if="scope.row.children != undefined">
              <el-row v-for="(item, index) in scope.row.children" :key="index">
                <span> {{ item.checkContent }} </span>
              </el-row>
            </div>
            <span v-else> {{ scope.row.checkContent }} </span> -->
            <span> {{ scope.row.checkContent }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="checkDescribe" label="描述" align="center">
          <template slot-scope="scope">
            <div class="morerow" v-if="scope.row.children != undefined">
              <el-row v-for="(item, index) in scope.row.children" :key="index">
                <span> {{ item.checkDescribe }} </span>
              </el-row>
            </div>
            <span v-else> {{ scope.row.checkDescribe }} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fieldName"
          label="字段名称"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <div class="morerow" v-if="scope.row.children != undefined">
              <el-row v-for="(item, index) in scope.row.children" :key="index">
                <el-input v-model="item.fieldName"></el-input>
              </el-row>
            </div>
            <el-input v-else v-model="scope.row.fieldName"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row>
      <!-- <el-button class="uploadbtn" type="primary" @click="uploadFile">
        上传文件
      </el-button> -->
      <el-upload
        class="uploadbtn"
        ref="upload"
        accept=".json"
        :action="''"
        :auto-upload="true"
        :show-file-list="false"
        :limit="1"
        :before-upload="uploadFile"
      >
        <el-button type="primary" class="add-item">上传文件</el-button>
      </el-upload>
    </el-row>
  </el-container>
</template>

<script>
import qualityApi from "@/api/qualityinspection";

export default {
  data() {
    return {
      tableMaxHeight: 450,
      defaultField: {
        index: 1,
        isCheck: 1,
        checkContent: "数据完整性",
        checkDescribe:
          "检查所填字段数据是否完整（可填写多个字段，会动态扩展行数）",
        fieldName: "",
        delBtn: true,
        type: "dataIntegrality",
      },
      checkDefaultDetail: [
        {
          index: 1,
          isCheck: 1,
          checkContent: "数据完整性",
          checkDescribe:
            "检查所填字段数据是否完整（可填写多个字段，会动态扩展行数）",
          fieldName: "",
          delBtn: true,
          type: "dataIntegrality",
        },
        {
          index: 2,
          isCheck: 1,
          checkContent: "省级行政区划编码检查",
          checkDescribe: '验证是否是以"13"开头的纯数字的行政区划编码',
          fieldName: "",
          delBtn: false,
          type: "provinceCode",
        },
        {
          index: 3,
          isCheck: 1,
          checkContent: "市级行政区划编码检查",
          checkDescribe: '验证是否是以"13"开头的纯数字且至少4位的行政区划编码',
          fieldName: "",
          type: "cityCode",
          delBtn: false,
        },
        {
          index: 4,
          isCheck: 1,
          checkContent: "县级行政区划编码检查",
          checkDescribe: '验证是否是以"13"开头的纯数字且至少6位的行政区划编码',
          fieldName: "",
          type: "countyCode",
          delBtn: false,
        },
        {
          index: 5,
          isCheck: 1,
          checkContent: "经纬度验证",
          checkDescribe: "经纬度是否在河北省境内",
          fieldName: "",
          type: "latlon",
          delBtn: false,
          children: [
            {
              checkDescribe: "验证所需经度字段名",
              fieldName: "",
              type: "lon",
              delBtn: false,
            },
            {
              checkDescribe: "验证所需纬度字段名",
              fieldName: "",
              type: "lat",
              delBtn: false,
            },
          ],
        },
        {
          index: 6,
          isCheck: 1,
          checkContent: "行政区划+经纬度验证",
          checkDescribe:
            "检查经纬度点位是否在行政区划范围内部，例：经纬度为116.4,39.9的位置是否在石家庄范围内",
          fieldName: "",
          type: "areaLatlon",
          delBtn: false,
          children: [
            {
              checkDescribe: "验证所需行政区划编码字段名",
              fieldName: "",
              type: "areaCode",
              delBtn: false,
            },
            {
              checkDescribe: "验证所需经度字段名",
              fieldName: "",
              type: "lon",
              delBtn: false,
            },
            {
              checkDescribe: "验证所需纬度字段名",
              fieldName: "",
              type: "lat",
              delBtn: false,
            },
          ],
        },
      ],
      checkDetail: [],
    };
  },
  components: {},
  mounted() {
    let that = this;
    this.checkDetail = JSON.parse(JSON.stringify(this.checkDefaultDetail));
    setTimeout(() => {
      that.resizeWindowEvent();
    }, 100);
  },
  methods: {
    // 重置表格高度
    resizeWindowEvent() {
      let that = this;
      this.tableInterval = setInterval(() => {
        if (that.$refs["ruleContent"]) {
          that.tableMaxHeight = that.$refs["ruleContent"].clientHeight;
          clearInterval(that.tableInterval);
        }
      }, 100);
      window.onresize = () => {
        return (() => {
          if (that.$refs["ruleContent"])
            that.tableMaxHeight = that.$refs["ruleContent"].clientHeight;
        })();
      };
    },
    addRules() {
      let obj = JSON.parse(JSON.stringify(this.defaultField));
      this.checkDetail.unshift(obj);
      this.checkDetail = this.checkDetail.map(function (item, index) {
        item.index = index + 1;
        return item;
      });
    },
    uploadFile(file) {
      let that = this;
      // let ceshiObj = {};
      let obj = new FormData();
      let completeArr = [];
      for (let i = 0; i < this.checkDetail.length; i++) {
        let param = this.checkDetail[i];
        if (param.isCheck) {
          if (!param.children) {
            switch (param.type) {
              case "dataIntegrality":
                if (that.webMessage(param.fieldName, param.checkContent))
                  return;
                completeArr.push(param.fieldName);
                break;
              default:
                if (that.webMessage(param.fieldName, param.checkContent))
                  return;
                obj.append(param.type, param.fieldName);
                // ceshiObj[param.type] = param.fieldName;
                break;
            }
          } else {
            let arr = [];
            for (let k = 0; k < param.children.length; k++) {
              const item = param.children[k];
              if (that.webMessage(item.fieldName, item.checkContent)) return;
              arr.push(item.fieldName);
            }
            obj.append(param.type, arr);
            // ceshiObj[param.type] = arr;
          }
        }
      }
      if (completeArr.length > 0) {
        obj.append("dataIntegrality", completeArr);
        // ceshiObj["dataIntegrality"] = completeArr;
      }
      const loading = this.$createLoading("数据质检中，请稍后！");
      obj.append("file", file);
      qualityApi
        .uploadInspectionFile(obj)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that
              .$confirm(result.content, "质检结果", {
                showConfirmButton: false,
                cancelButtonText: "关闭",
                type: "success",
              })
              .then(() => {})
              .catch(() => {});
          } else {
            that
              .$confirm(result.content, "质检结果", {
                showConfirmButton: false,
                cancelButtonText: "关闭",
                type: "error",
              })
              .then(() => {})
              .catch(() => {});
          }
        })
        .catch((err) => {
          loading.close();
          that.$message({
            type: "error",
            message: err,
          });
        });
      return false;
    },
    webMessage(fieldName, str) {
      if (fieldName == "") {
        this.$message({
          message: "请完善" + str,
          type: "warning",
        });
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: block;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #ffffff;
  overflow: hidden;
  overflow-y: auto;
  .el-row {
    line-height: 40px;
    &::before {
      display: unset;
    }
  }
  .header {
    margin-bottom: 10px;
  }
  .ruleContent {
    height: calc(100% - 110px);
  }
  .el-table {
    /deep/ .el-table--border .el-table__cell:first-child .cell {
      padding-left: unset;
    }
    /deep/ .cell {
      padding-left: unset;
      padding-right: unset;
    }
    .el-input {
      margin: 0 10px;
      width: calc(100% - 20px);
    }
    .morerow {
      .el-row {
        padding-bottom: 10px;
        border-bottom: 1px solid #eeeeee;
        &:last-child {
          padding-top: 10px;
          padding-bottom: 0px;
          border-bottom: 0px;
        }
      }
    }
  }
  .uploadbtn {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }
}
</style>