<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 = "";
        this.isRelatedFactorTableInfo.data = [];
        this.unRelatedFactorTableInfo.data = [];
      }
    },
    "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 insertConfigNoArr = this.unRelatedFactorTableInfo.selectList.map(
            item => item.id
          );
          const insertData = {
            equipNo: this.unRelatedFactorTableInfo.query.equipNo,
            configNos: insertConfigNoArr
          };
          this.$http
            .post(this.nozzle.sysEquipIsRelatedFactor, { data: insertData })
            .then(res => {
              if (res.data.code === 1) {
                this.factorQuery.searchStr = "";
                this.factorTableInfo.refresh = Math.random();
                this.factorTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? "success" : "error",
                showClose: true
              });
            });
          break;
        //解绑设备与因子
        case "remove":
          const removeConfigNoArr = this.isRelatedFactorTableInfo.selectList.map(
            item => item.id
          );
          const removeData = {
            equipNo: this.unRelatedFactorTableInfo.query.equipNo,
            configNos: removeConfigNoArr
          };
          this.$http
            .post(this.nozzle.sysEquipUnRelatedFactor, { data: removeData })
            .then(res => {
              if (res.data.code === 1) {
                this.factorQuery.searchStr = "";
                this.factorTableInfo.refresh = Math.random();
                this.factorTableInfo.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>