<template>
  <div class="page-data">
    <!--搜素框-->
    <div class="page-filter">
      <page-filter
        :query.sync="deviceFilterInfo.query"
        :filter-list="deviceFilterInfo.list"
        @handleClick="handleClick"
      />
    </div>
    <div class="page-content">
      <!--表格-->
      <div class="h-100">
        <page-table
          tabIndex
          pagination
          :api-url="deviceTableInfo.url"
          :refresh="deviceTableInfo.refresh"
          :data.sync="deviceTableInfo.data"
          :query="deviceFilterInfo.query"
          :page-query="deviceTableInfo.pageQuery"
          :list-type-info="listTypeInfo"
          :init-curpage="deviceTableInfo.initCurpage"
          :field-list="deviceTableInfo.fieldList"
          :handle="deviceTableInfo.handle"
          @handleClick="handleClick"
        >
          <template v-slot:col-status="scope">
            <el-button type="text" size="small" :class="[scope.row.status === 1 ? '' : 'red']">
              {{ scope.row.status === 1 ? "管理中" : "未管理" }}
            </el-button>
          </template>
        </page-table>
      </div>
    </div>
    <!--弹窗-->
    <page-dialog
      class="page-data-dialog"
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :width="dialogInfo.type === 'relate' ? '80%' : '500px'"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
      @handleClick="handleClick"
    >
      <!--关联因子-->
      <template v-if="dialogInfo.type === 'relate'">
        <div class="page-filter">
          <el-form :inline="true" :model="factorQuery" ref="factorQuery" size="medium">
            <el-form-item label="">
              <el-input v-model="factorQuery.searchStr" placeholder="因子名称/ASCII码" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('factorSearch')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-content">
          <el-row :gutter="20" class="h-100">
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">未关联因子列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="unRelated"
                :api-url="factorTableInfo.url"
                :refresh="factorTableInfo.refresh"
                :data.sync="unRelatedFactorTableInfo.data"
                :query="unRelatedFactorTableInfo.query"
                :init-curpage="factorTableInfo.initCurpage"
                :field-list="factorTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
            <el-col :span="4" class="h-100">
              <div class="btn-group">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-right"
                  :disabled="isCanInsertFactor"
                  @click="handleClick('insert')"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-left"
                  :disabled="isCanRemoveFactor"
                  @click="handleClick('remove')"
                  >移除</el-button
                >
              </div>
            </el-col>
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">已关联因子列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="isRelated"
                :api-url="factorTableInfo.url"
                :refresh="factorTableInfo.refresh"
                :data.sync="isRelatedFactorTableInfo.data"
                :query="isRelatedFactorTableInfo.query"
                :init-curpage="factorTableInfo.initCurpage"
                :field-list="factorTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
          </el-row>
        </div>
      </template>
      <!--新增/修改表单-->
      <template v-else>
        <page-form
          :ref-obj.sync="formInfo.ref"
          :data="formInfo.data"
          :field-list="formInfo.fieldList"
          :rules="formInfo.rules"
          :label-width="formInfo.labelWidth"
          :list-type-info="listTypeInfo"
          @handleClick="handleClick"
        />
      </template>
    </page-dialog>
  </div>
</template>

<script>
import { message } from "./../../util/item";
export default {
  data() {
    // 验证电话
    let checkPhone = (rule, value, callback) => {
      let check = this.$validate({ label: "电话", value, rules: ["phone"] });
      if (!check.result) {
        callback(new Error(check.message));
      } else {
        callback();
      }
    };
    return {
      //设备搜索相关
      deviceFilterInfo: {
        query: {
          searchStr: "",
          startDate: "",
          endDate: ""
        },
        list: [
          {type: "input", label: "设备名称/编号", value: "searchStr", hideLabel: true },
          {type: "date", label: "开始时间", value: "startDate", dateType: "date", datePickerOptions: "pickerOptionsStart", hideLabel: true},
          {type: "date", label: "结束时间", value: "endDate", dateType: "date", datePickerOptions: "pickerOptionsEnd", hideLabel: true},
          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加设备", btType: "primary", icon: "el-icon-circle-plus-outline", event: "create", show: true, has: "m11-3-1"}
        ]
      },
      //设备表格相关
      deviceTableInfo: {
        url: this.nozzle.sysEquipList, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "设备编号", value: "equipNo", minWidth: 100, tooltip: true },
          { label: "设备描述", value: "equipDesc", minWidth: 150, tooltip: true },
          { label: "设备厂家", value: "equipFactory", minWidth: 150, tooltip: true },
          { label: "厂家简称", value: "equipFactoryAbb", minWidth: 100, tooltip: true },
          { label: "联系人", value: "contactName", width: 100 },
          { label: "电话", value: "contactMobile", width: 120 },
          { label: "站点编号", value: "siteCode", minWidth: 100, tooltip: true },
          { label: "更新时间", value: "updateTime", minWidth: 150, tooltip: true }
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "180",
          btList: [
            { label: "关联因子", size: "small", type: "text", event: "relate", show: true, has: 'm11-3-4' },
            { label: "修改", size: "small", type: "text", event: "update", show: true, has: 'm11-3-2' },
            { label: "删除", size: "small", type: "text", event: "delete", show: true, has: 'm11-3-3' }
          ]
        }
      },
      //设备表单相关
      formInfo: {
        ref: null,
        data: {
          id: undefined,
          equipNo: "",
          equipDesc: "",
          equipFactory: "",
          equipFactoryAbb: "",
          contactName: "",
          contactMobile: "",
          siteCode: ""
        },
        fieldList: [
          { label: "设备编号", value: "equipNo", type: "input", required: true },
          { label: "设备描述", value: "equipDesc", type: "input", required: true },
          { label: "设备厂家", value: "equipFactory", type: "input", required: true },
          { label: "厂家简称", value: "equipFactoryAbb", type: "input", required: true },
          { label: "联系人", value: "contactName", type: "input", required: true },
          { label: "电话", value: "contactMobile", type: "input", required: true, validator: checkPhone },
          { label: "站点编号", value: "siteCode", type: "select", list: "siteList", filterable:true, required: true },
        ],
        rules: {},
      },
      //列表相关
      listTypeInfo:{
        siteList:[]
      },
      //弹窗相关
      dialogInfo:{
        title: {
          update: "编辑设备",
          create: "添加设备",
          relate: "",
        },
        width: "500px",
        visible: false,
        btLoading: false,
        type: "",
        btList: [
          {label:"关闭",type:"",icon:"",event:"close",show:true},
          {label:"保存",type:"primary",icon:"",event:"save",show:true,loading:true}
        ]
      },
      //因子表格通用相关
      factorTableInfo: {
        url: this.nozzle.sysEquipFactorList, //接口地址
        refresh: 1,
        initCurpage: 1,
        fieldList: [
          { label: "因子名称", value: "codeProperty", minWidth: 100, tooltip: true },
          { label: "因子ASCII码", value: "codeAscll", minWidth: 100, tooltip: true },
        ]
      },
      //已关联因子表格相关
      isRelatedFactorTableInfo: {
        data: [],
        query: {
          sign: ""
        },
        selectList: []
      },
      //未关联因子表格相关
      unRelatedFactorTableInfo: {
        data: [],
        query: {
          sign: "unbound"
        },
        selectList: []
      },
      //设备关联过滤相关
      factorQuery: {
        searchStr: "",
        equipNo: ""
      }
    }
  },
  computed: {
    //移除按钮是否可点击
    isCanRemoveFactor() {
      return this.isRelatedFactorTableInfo.selectList.length ? false : true;
    },
    //添加按钮是否可点击
    isCanInsertFactor() {
      return this.unRelatedFactorTableInfo.selectList.length ? false : true;
    }
  },
  watch: {
    "dialogInfo.visible"(val) {
      if (!val) {
        if (this.formInfo.ref) {
          this.formInfo.ref.resetFields();
        }
        this.resetForm();
        this.btnLoading = false;
        this.factorQuery.searchStr = "";
      }
    },
    "dialogInfo.type"(val) {
      this.dialogInfo.btList.forEach(item =>{
        if(item.event === "save") {
          item.show = val === "relate" ? false : true;
        }
      })
    },
    "factorQuery.searchStr"(val) {
      Object.assign(this.isRelatedFactorTableInfo.query, this.factorQuery);
      Object.assign(this.unRelatedFactorTableInfo.query, this.factorQuery);
    }
  },
  created() {
    this.initSiteData();
  },
  mounted() {
    this.initRules();
    this.deviceTableInfo.refresh = Math.random();
  },
  methods: {
    //初始化验证
    initRules() {
      const formInfo = this.formInfo;
      formInfo.rules = this.$initRules(formInfo.fieldList);
    },
    //初始化站点数据
    initSiteData() {
      this.$http.post(this.nozzle.listExtend, {
        current: 0,
        data: {searchStr: "",startDate: "",endDate: ""},
        size: 0
      }).then(res =>{
        if(res.data.code === 1) {
          this.listTypeInfo.siteList = res.data.data.list.map(item =>{
            return {
              key: item.stName,
              value: item.stCode
            }
          })
        }
      })
    },
    //表格checkbox选择事件
    handleEvent(event, data) {
      switch (event) {
        case "isRelated":
          this.isRelatedFactorTableInfo.selectList = data;
          break;
        case "unRelated":
          this.unRelatedFactorTableInfo.selectList = data;
          break;
      }
    },
    //点击事件
    handleClick(event, data) {
      switch (event) {
        //设备搜索
        case "search":
          this.deviceTableInfo.initCurpage = Math.random();
          this.deviceTableInfo.refresh = Math.random();
          break;
        //设备添加按钮
        case "create":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          break;
        //编辑设备按钮
        case "update":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          for (let key in data) {
            if (key in this.formInfo.data) {
              this.formInfo.data[key] = data[key];
            }
          }
          break;
        //删除设备按钮
        case "delete":
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(res =>{
            this.$http.post(this.nozzle.sysEquipDelete,{data:{equipNo:data.equipNo}}).then(res =>{
              if(res.data.code === 1 || res.data.code === 200) {
                this.deviceTableInfo.refresh = Math.random();
                this.deviceTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? 'success' : 'error',
                showClose: true,
              })
            }).catch(e =>{
              message(e);
            })
          }).catch(() =>{})
          break;
        //查看关联因子
        case "relate":
          this.dialogInfo.type = event;
          this.factorQuery.equipNo = data.equipNo;
          this.dialogInfo.visible = true;
          setTimeout(() => {
            Object.assign(this.isRelatedFactorTableInfo.query, this.factorQuery);
            Object.assign(this.unRelatedFactorTableInfo.query, this.factorQuery);
            this.factorTableInfo.refresh = Math.random();
          }, 0);
          break;
        //关联因子搜索
        case "factorSearch":
          this.factorTableInfo.initCurpage = Math.random();
          this.factorTableInfo.refresh = Math.random();
          break;
        //添加因子到站点
        case "insert":
          const insertEquipNoArr = this.unRelatedDeviceTableInfo.selectList.map( item => item.equipNo);
          const insertData = {
            siteCode: this.unRelatedDeviceTableInfo.query.siteCode,
            equipNos: insertEquipNoArr
          };
          this.$http.post(this.nozzle.sysEquipInsertBatch, { data: insertData }).then(res => {
            if (res.data.code === 1) {
              this.deviceRelatedQuery.searchStr = "";
              this.deviceTableInfo.refresh = Math.random();
              this.deviceTableInfo.initCurpage = Math.random();
            }
            this.$message({
              message: res.data.msg,
              type: res.data.code === 1 ? "success" : "error",
              showClose: true
            });
          });
          break;
        //解绑因子与站点
        case "remove":
          const removeEquipNoArr = this.isRelatedDeviceTableInfo.selectList.map(item => item.equipNo);
          const removeData = {
            siteCode: this.isRelatedDeviceTableInfo.query.siteCode,
            equipNos: removeEquipNoArr
          };
          this.$http.post(this.nozzle.sysEquipRemoveBatch, { data: removeData }).then(res => {
            if (res.data.code === 1) {
              this.deviceRelatedQuery.searchStr = "";
              this.deviceTableInfo.refresh = Math.random();
              this.deviceTableInfo.initCurpage = Math.random();
            }
            this.$message({
              message: res.data.msg,
              type: res.data.code === 1 ? "success" : "error",
              showClose: true
            });
          }).catch(e =>{console.log(e)});
          break;
        //关闭
        case "close":
          setTimeout(() => {
            this.dialogInfo.visible = false;
          }, 0);
          break;
        //保存表单
        case "save":
          const type = this.dialogInfo.type;
          this.formInfo.ref.validate(valid => {
            if (valid) {
              this.btnLoading = true;
              const params = {
                data: this.formInfo.data
              }
              this.$http.post(this.nozzle.sysEquipAddUpdate, params).then(res => {
                if (res.data.code === 1 || res.data.code === 200) {
                  this.dialogInfo.visible = false;
                  this.deviceTableInfo.refresh = Math.random();
                }
                this.$message({
                  message: res.data.msg,
                  type: res.data.code === 1 ? "success" : "error",
                  showClose: true
                });
                this.btnLoading = false;
              })
              .catch(e => {
                console.log(e);
                this.btnLoading = false;
              });
            }
          });
          break;
      }
    },
    //重置表单
    resetForm() {
      this.formInfo.data = {
        id: undefined,
        equipNo: "",
        equipDesc: "",
        equipFactory: "",
        equipFactoryAbb: "",
        contactName: "",
        contactMobile: "",
        siteCode: ""
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.table-title{
  @include hl(30px,30px);
  color: #409EFF;
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}
.btn-group {
  height: 100%;
  @include fdaj(center, center);
  /deep/ .el-button + .el-button {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>