<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
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
      @handleClick="handleClick"
    >
      <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"
      />
    </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: "", event: "search", show: true},
          {type: "button", label: "添加设备", btType: "primary", icon: "", event: "create", show: true, has: "m11-3-1"}
        ]
      },
      //设备表格相关
      deviceTableInfo: {
        url: this.nozzle.sysEquipList, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [
          {equipNo:1000,equipDesc:"3333",equipFactory:'4444'}
        ],
        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: "120",
          btList: [
            { 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: '添加设备'
        },
        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}
        ]
      },
    }
  },
  watch: {
    "dialogInfo.visible"(val) {
      if (!val) {
        if (this.formInfo.ref) {
          this.formInfo.ref.resetFields();
        }
        this.resetForm();
        this.btnLoading = false;
      }
    },
  },
  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
            }
          })
        }
      })
    },
    //点击事件
    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 "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>