<template>
  <div class="queryItemSettings_home">
    <div class="wrap">
      <DataTable
        ref="DataTable"
        data-id="9"
        edit-id="51"
        :data-content="{ dataStructureID }"
        :rows="12"
        label-width="140px"
        :min-height="70"
        width="800px"
        :isDialog="false"
        @handleAdd="handleAdd"
        @handleEdit="handleEdit"
      />
    </div>
    <Dialog :width="width" :flag="flag">
      <div class="dialog-content">
        <div class="title">{{ tableTitle }}</div>
        <div class="content">
          <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
            <el-row :gutter="20">
              <!-- <el-col :span="12">
                  <el-form-item label="数据项名称">
                    <template v-if="
                        item.listqueryTemplateID ||
                        item.listqueryTemplateID == 0
                      ">
                      <el-select size="small" clearable style="width: 100%" v-model="tableForm[item.columnName]" @change="changeSelect(item.columnName)" placeholder="请选择">
                        <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
                        </el-option>
                      </el-select>
                    </template>
                    <template v-else>
                      <el-input size="small" v-model="tableForm[item.columnName]"></el-input>
                    </template>
                  </el-form-item>
                </el-col> -->
              <el-col :span="12">
                <el-form-item label="数据项名称">
                  <el-input
                    size="small"
                    v-model="tableForm.ItemName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据项类型">
                  <el-select
                    size="small"
                    clearable
                    style="width: 100%"
                    v-model="tableForm.dataType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptions.dataType"
                      :key="item.v"
                      :label="item.k"
                      :value="item.v"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="输出标识符">
                  <el-input
                    size="small"
                    v-model="tableForm.outputIdentifier"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述">
                  <el-input
                    size="small"
                    v-model="tableForm.ItemDescribe"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="唯一项">
                  <el-select
                    size="small"
                    clearable
                    style="width: 100%"
                    v-model="tableForm.isKey"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptions.OptionArr"
                      :key="item.v"
                      :label="item.k"
                      :value="item.v"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="必填项">
                  <el-select
                    size="small"
                    clearable
                    style="width: 100%"
                    v-model="tableForm.isMust"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptions.OptionArr"
                      :key="item.v"
                      :label="item.k"
                      :value="item.v"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="多条拆分">
                  <el-select
                    size="small"
                    clearable
                    style="width: 100%"
                    v-model="tableForm.isSplite"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptions.OptionArr"
                      :key="item.v"
                      :label="item.k"
                      :value="item.v"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="取值表达式">
                  <el-input
                    size="small"
                    type="textarea"
                    v-model="tableForm.computingExpression"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="实时计算表达式">
                  <el-input
                    size="small"
                    type="textarea"
                    v-model="tableForm.calculationExpression"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计算结果标识符">
                  <el-input
                    size="small"
                    v-model="tableForm.calcIdentifier"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计算参数">
                  <el-input
                    size="small"
                    v-model="tableForm.calcparameter"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计算数据源">
                  <el-select
                    size="small"
                    clearable
                    style="width: 100%"
                    v-model="tableForm.dataSourceID"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptions.listValues"
                      :key="item.v"
                      :label="item.k"
                      :value="item.v"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="foot right t30">
          <el-button size="medium" @click="handleOk" class="r24" type="primary"
            >确定</el-button
          >
          <el-button @click="flag = false" size="medium">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script>
import DataTable from "@/components/Table";
import Dialog from "@/layout/components/Dialog/index.vue";
import { Query,GeneralDataReception } from "@/api/dataIntegration";
export default {
  components: { DataTable, Dialog },
  data() {
    return {
      dataStructureID: null,
      flag: false,
      width: "800px",
      tableTitle: "新增",
      tableForm: {},
      labelWidth: "110px",
      tableOptions: {
        dataType: [
          {
            v: 1,
            k: "字符串",
            setValue: "v",
            setlabel: "k",
          },
          {
            v: 2,
            k: "数字",
            setValue: "v",
            setlabel: "k",
          },
          {
            v: 3,
            k: "日期",
            setValue: "v",
            setlabel: "k",
          },
          {
            v: 4,
            k: "时间",
            setValue: "v",
            setlabel: "k",
          },
          {
            v: 5,
            k: "日期时间",
            setValue: "v",
            setlabel: "k",
          },
        ],
        OptionArr: [
          {
            v: 1,
            k: "是",
            setValue: "v",
            setlabel: "k",
          },
          {
            v: 0,
            k: "否",
            setValue: "v",
            setlabel: "k",
          },
        ],
        listValues:[]
      },
      tableType:"add"
    };
  },
  created() {
    if (!this.$route.query.dataStructureID) {
      this.$router.push("/systemSettings/datastructure");
      return;
    }
    this.dataStructureID = Number(this.$route.query.dataStructureID);
    this.getData()
  },
  methods:{
    handleAdd(){
      this.flag = true
      this.tableType= 'add'
    },
    handleEdit(row){
      this.tableTitle="编辑",
      this.flag = true
      this.tableType= 'edit'
      this.queryDetial(row.ItemID)
    },
    //弹框-确定
    handleOk () {
      this.submitClickHandler();
    },
    // 新增/编辑-确认
    submitClickHandler () {
      this.loading = true;
      this.$refs["ruleForm"].validate((valid) => {
        console.log(this.tableForm)
        this.tableForm['dataStructureID'] = this.dataStructureID;
        if (valid) {
          if (this.tableType == "add") {
            this.tableForm.event = 1;
          } else {
            this.tableForm.event = 2;
          }
          this.generalDataReception(this.tableForm);
        } else {
          return false;
        }
      });
    },
    async generalDataReception (data) {
      try {
        data = {
          ...data,
          ...this.dataContent
        }
        const { code, message } = await GeneralDataReception({
          serviceId: 11,
          dataContent: JSON.stringify(data),
        });
        this.loading = true;
        if (code == 0) {
          this.$message.success("操作成功");
          this.$refs['DataTable'].getQuery();
          this.flag = false;
          this.rmFlag = false;
          this.tableObj = {};
          this.tableForm = {};
        } else {
          this.$message.error("操作失败");
          this.flag = false;
          this.rmFlag = false;
          this.tableObj = {};
          this.tableForm = {};
        }
      } catch (error) {
        console.log(error);
        this.flag = false;
        this.rmFlag = false;
        this.tableObj = {};
        this.tableForm = {};
      }
    },
    async getData(){
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          id: 21,
          dataContent: [],
        });
        if (code == 0) {
            console.log(returnData)
            this.tableOptions.listValues = returnData.listValues
        } else {
          this.loading = false;
        }
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
    async queryDetial(id){
      try {
        const { code, returnData } = await Query({
          id: 51,
          dataContent: [id],
        });
        if (code == 0) {
            console.log(returnData)
            this.tableForm = JSON.parse(JSON.stringify(returnData.listValues[0]))
        } else {
          this.loading = false;
        }
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.queryItemSettings-home {
  .wrap {
    padding: 16px 0;
    .service-header {
      line-height: 32px;
      font-size: 14px;
      .btn-white {
        border: 1px solid #9ebbf7;
        background: #f5f7fa;
        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
        border-radius: 4px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #2d67e3;
      }
      margin-bottom: 30px;
    }
  }
}
</style>
