<!--
 * @Author: Badguy
 * @Date: 2022-04-12 17:49:47
 * @LastEditTime: 2022-04-13 16:17:37
 * @LastEditors: your name
 * @Description: 目标数据管理-首页
 * have a nice day!
-->

<template>
  <div class="targetData-home">
    <div class="wrap">
      <div class="targetData-header flex">
        <div class="manageTitle">目标数据管理</div>
        <div class="addBtn">
          <el-button class="button-white" size="small" @click="showAdd()"
            >新增</el-button
          >
        </div>
      </div>
      <div class="targetData-content">
        <el-row :gutter="24">
          <el-col v-for="item in dataList" :key="item.targetdataID" :span="4">
            <div class="grid-content">
              <div class="grid-content-hand flex">
                <div class="title flex-wrap">
                  <!-- <div class="name">{{ item.tdataName }}</div> -->
                  <el-tooltip class="item" effect="dark" :content="item.tdataName" placement="bottom">
                    <div class="name">{{ item.tdataName }}</div>
                  </el-tooltip>
                  <i class="loger" @click="showEditDialog(item)" />
                </div>
                <i class="el-icon-close icon" @click="showRemoveDialog(item)" />
              </div>
              <div class="dataType">
                <span>{{item.datatypeText}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
       <!--新增/编辑-->
      <Dialog :flag="editDialogVisible" width="466px" :show-flag="true">
        <div class="airportInfoDialog dialog-public-background">
          <div class="title">{{ editDialogTitle }}</div>
          <div class="content">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="140px"
              class="demo-ruleForm"
            >
              <el-form-item label="目标数据名" prop="tdataName">
                <el-input
                  v-model="ruleForm.tdataName"
                  size="small"
                  placeholder="请输入目标数据名称"
                />
              </el-form-item>
              <el-form-item label="数据类型" prop="datatype">
                <el-select
                  v-model="ruleForm.datatype"
                  size="small"
                  placeholder="请选择数据类型"
                >
                  <el-option label="字符串" value="1"></el-option>
                  <el-option label="数字" value="2"></el-option>
                  <el-option label="时间" value="3"></el-option>
                  <el-option label="日期" value="4"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="目标数据事件标识" prop="eventID">
                <el-input
                  v-model="ruleForm.eventID"
                  size="small"
                  placeholder="请输入目标数据事件标识"
                />
              </el-form-item>

              <el-form-item label="目标数据描述">
                <el-input
                  v-model="ruleForm.dataDescribe"
                  size="small"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入描述"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="foot center t30">
            <el-button
              size="medium"
              type="primary"
              class="r25 r26"
              @click="submitClickHandler()"
              >提交</el-button
            >
            <el-button size="medium" class="r26" @click="resetForm('ruleForm')"
              >取消</el-button
            >
          </div>
        </div>
      </Dialog>
      <!--删除弹框-->
      <Dialog :flag="removeDialogVisible">
        <div class="airportInfoDialog">
          <div class="Deltitle">删除协议</div>
          <div class="content er">
            <div class="log">是否确认删除{{ rmObj.tdataName }}？</div>
          </div>
          <div class="DelFoot right t30">
            <el-button
              size="medium"
              class="r25 r26"
              type="danger"
              @click="removeSubmit()"
              >删除</el-button
            >
            <el-button
              size="medium"
              class="r26"
              @click="removeDialogVisible = false"
              >取消</el-button
            >
          </div>
        </div>
      </Dialog>
    </div>
  </div>
</template>

<script>
import Dialog from "@/layout/components/Dialog/index.vue";
import { Query,GeneralDataReception  } from '@/api/dataIntegration'

export default {
  name: "targetDataHome",
  components: { Dialog },
  data() {
    return {
      dataList: [],
      removeDialogVisible: false,
      rmObj: {},
      editDialogVisible:false,
      editDialogTitle:"目标数据新增",
      ruleForm: {
        // 信息表单
        tdataName: "",
        dataDescribe: "",
        eventID: "",
        datatype: "",
      },
      rules: {
        // 机器信息表单验证
        tdataName: [
          { required: true, message: "请输入目标数据名称", trigger: "blur" },
        ],
        eventID: [
          {
            required: true,
            message: "请输入目标数据事件标识",
            trigger: "blur",
          },
        ],
        datatype: [
          { required: true, message: "请选择数据类型", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const res = await Query({
          id: 7,
          dataContent: []
        });
        if (res.code === "0") {
            res.returnData.forEach(element => {
              if(element.datatype == 1){
                element.datatypeText = "字符串"
              }
              else if(element.datatype == 2){
                element.datatypeText = "数字"
              }
              else if(element.datatype == 3){
                element.datatypeText = "时间"
              }
              else if(element.datatype == 4){
                element.datatypeText = "日期"
              }
              else{
                element.datatypeText = "其他"
              }
            });
            this.dataList = res.returnData
        } else {
          this.$message.error(res.message ?? "失败");
        }
      } catch (error) {
        console.log("错误", error);
      }
    },
    showAdd(){
      this.editDialogTitle = "新增目标数据";
      this.editDialogVisible = true;
    },
    showEditDialog(item){
      this.$router.push({path:'/systemSettings/targetDataEdit',query:{id:item.targetdataID}})
    },
    // 新增/编辑-确认
    submitClickHandler() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.addSubmit();
          this.resetForm("ruleForm");
        }
      });
    },
    async addSubmit() {
      this.ruleForm["operate"] = "1";
      try {
        const res = await GeneralDataReception({
          serviceId: "7",
          dataContent: JSON.stringify(this.ruleForm),
        });
        if (res.code === "0") {
          this.$message.success(res.message ?? "成功");
          this.getList()
        } else {
          this.$message.error(res.message ?? "失败");
        }
      } catch (error) {
        console.log("错误", error);
      }
    },
    // 删除-弹框
    showRemoveDialog(item) {
      this.rmObj = item;
      this.removeDialogVisible = true;
    },
    // 确认删除
   async removeSubmit() {
      this.rmObj["operate"] = "3";
      try {
        const res = await GeneralDataReception({
          serviceId: "7",
          dataContent:  JSON.stringify(this.rmObj),
        });
        if (res.code === "0") {
          this.removeDialogVisible = false;
          this.$message.success("删除成功");
          this.getList()
        } else {
          this.$message.error(res.message ?? "失败");
        }
      } catch (error) {
        console.log("错误", error);
      }
    },
    // 重置
    resetForm(formName) {
      this.ruleForm = {}
      this.$refs[formName].resetFields();
      this.editDialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.targetData-home {
  .wrap {
    padding: 16px 0;
    .targetData-header {
      line-height: 32px;
      font-size: 14px;
      .button-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;
    }
    .targetData-content {
      .grid-content {
        height: 120px;
        background: #ffffff;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 25px;
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .dataType {
          font-size: 14px;
          font-weight: 400;
          color: #101116;
        }
        .title {
          font-size: 16px;
          font-family: Helvetica;
          font-weight: bold;
          color: #101116;
          white-space: nowrap;
          max-width: 80%;
          text-overflow: ellipsis;
          overflow: hidden;
          .name {
            white-space: nowrap;
            max-width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .loger {
            width: 14px;
            height: 14px;
            margin-left: 24px;
            background: url("../../../../assets/status/ic_edit_default.png")
              no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            position: relative;
            top: 2px;
          }
          .loger:hover {
            background: url("../../../../assets/status/ic_edit_hovar.png")
              no-repeat;
            background-size: 100% 100%;
          }
        }
        .icon {
          cursor: pointer;
          font-size: 16px;
          color: #606266;
        }
      }
    }
  }
}
</style>
