<template>
  <div>
    <div class="search_header">
      <div class="search_left">
        <Select
          v-model="searchForm.regionid"
          @on-change="searchList()"
          style="margin-right: 16px; width: 150px"
        >
          <Option :value="0">所有区域</Option>
          <Option
            v-for="regionItem in searchForm.regionList"
            :value="regionItem.regionid"
            :key="regionItem.regionid"
            >{{ regionItem.regionName }}</Option
          >
        </Select>
        <Select
          v-model="searchForm.snState"
          @on-change="searchList()"
          style="margin-right: 16px; width: 150px"
        >
          <Option :value="-1">所有状态</Option>
          <Option :value="0">正常</Option>
          <Option :value="1">注销</Option>
        </Select>
        <Input
          v-model="searchForm.sn"
          placeholder="请输入设备号模糊搜索"
          search
          @on-search="searchList()"
          style="width: 200px"
        />
      </div>
      <div class="search_right">
        <Button type="primary" class="primary_btn" @click="toAdd()"
          >新建</Button
        >
        <Button type="primary" class="primary_btn" @click="toBatchDelete()"
          >批量删除</Button
        >
      </div>
    </div>
    <div class="table_wrap">
      <Table
        :columns="columns"
        :data="searchForm.list"
        @on-selection-change="tableSelectionChange"
        @on-row-click="tableRowClick"
      >
        <template slot-scope="{ row }" slot="snStateSlot">
          <div class="action_list">
            <div class="action_success" v-if="row.snState === 0">正常</div>
            <div class="action_error" v-else-if="row.snState === 1">注销</div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="actionSlot">
          <div class="action_list" @click.stop>
            <div @click="toEdit(row)">编辑</div>
            <div class="action_del" @click="toDel(row)">删除</div>
          </div>
        </template>
      </Table>
    </div>
    <div class="page_wrap">
      <Page
        :transfer="true"
        :total="searchForm.total"
        :current="searchForm.page"
        :page-size="searchForm.size"
        :page-size-opts="[10, 20, 40, 60]"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        show-total
        show-sizer
      ></Page>
    </div>
    <!-- 新建/编辑 -->
    <Modal
      class="modal1"
      :mask-closable="false"
      v-model="addInfo.show"
      :title="addInfo.daid ? '编辑' : '新建'"
    >
      <Form
        v-if="addInfo.show"
        ref="addForm"
        :model="addInfo"
        :rules="rules"
        :label-width="100"
      >
        <FormItem label="所属区域" prop="regionid">
          <Select
            :transfer="true"
            v-model="addInfo.regionid"
            placeholder="请选择所属区域"
          >
            <Option
              v-for="regionItem in searchForm.regionList"
              :value="regionItem.regionid"
              :key="regionItem.regionid"
              >{{ regionItem.regionName }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="设备号" prop="sn">
          <Input v-model="addInfo.sn" placeholder="请输入设备号"></Input>
        </FormItem>
        <FormItem v-if="addInfo.daid" label="所属状态" prop="snState">
          <RadioGroup v-model="addInfo.snState">
            <Radio :label="0">正常</Radio>
            <Radio :label="1">注销</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="备注" prop="comm">
          <Input
            type="textarea"
            v-model="addInfo.comm"
            placeholder="请输入备注"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="addInfo.show = false">取消</Button>
        <Button @click="saveAddInfo()" type="primary" class="primary_btn"
          >保存</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import { region_list_sel_pt } from "@/api/region";
import {
  deviceAuth_list,
  deviceAuth_add,
  deviceAuth_edit,
  deviceAuth_delete,
  deviceAuth_batch_delete
} from "@/api/device_manager";
export default {
  data() {
    return {
      rules: {
        regionid: [
          {
            required: true,
            type: "number",
            message: "请选择所属区域",
            trigger: "change"
          }
        ],
        sn: [
          {
            required: true,
            message: "请输入设备号",
            trigger: "change"
          }
        ],
        snState: [
          {
            required: true,
            type: "number",
            message: "请选择所属状态",
            trigger: "change"
          }
        ]
      },
      addInfo: {
        daid: null,
        rversion: null,
        show: false,
        regionid: null,
        sn: null,
        snState: null,
        comm: ""
      },
      searchForm: {
        regionid: 0,
        snState: -1,
        regionList: [],
        sn: "",
        page: 1,
        size: 10,
        list: [],
        total: 0
      },
      // 批量删除
      batchDeleteList: [],
      columns: [
        {
          type: "selection",
          fixed: "left",
          width: 60,
          align: "center"
        },
        {
          title: "序号",
          fixed: "left",
          align: "center",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.searchForm.page - 1) * this.searchForm.size +
                1
            );
          }
        },
        {
          title: "所属区域",
          fixed: "left",
          minWidth: 150,
          key: "regionName",
          align: "center"
        },
        {
          title: "设备号",
          fixed: "left",
          minWidth: 170,
          key: "sn",
          align: "center"
        },
        {
          title: "状态",
          slot: "snStateSlot",
          width: 90,
          align: "center"
        },
        {
          title: "创建人",
          minWidth: 100,
          key: "createname",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createtime",
          width: 190,
          align: "center"
        },
        {
          title: "操作人",
          minWidth: 100,
          key: "updatename",
          align: "center"
        },
        {
          title: "操作时间",
          key: "updatetime",
          width: 190,
          align: "center"
        },
        {
          title: "操作",
          fixed: "right",
          slot: "actionSlot",
          width: 130,
          align: "center"
        }
      ]
    };
  },
  created() {
    this.getRegionList();
    this.searchList();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  methods: {
    // 获取搜索区域列表
    getRegionList() {
      region_list_sel_pt({}).then((data) => {
        if (data.code === 0) {
          this.searchForm.regionList = data.obj;
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    // 搜索
    searchList() {
      this.searchForm.page = 1;
      this.getList();
    },
    // 页码改变
    pageChange(page) {
      this.searchForm.page = page;
      this.getList();
    },
    // 每页显示数量改变
    pageSizeChange(size) {
      this.searchForm.size = size;
      this.searchForm.page = 1;
      this.getList();
    },
    tableSelectionChange(list) {
      this.batchDeleteList = list.map((item) => {
        return {
          daid: item.daid
        };
      });
    },
    // 表格行点击
    tableRowClick(row, index) {
      let otherSelectedList = this.batchDeleteList.filter((item) => {
        return item.daid !== row.daid;
      });
      if (
        (this.batchDeleteList.length > 0 &&
          otherSelectedList.length === this.batchDeleteList.length) ||
        this.batchDeleteList.length === 0
      ) {
        row._checked = true;
        this.batchDeleteList.push({
          daid: row.daid
        });
      } else {
        row._checked = false;
        this.batchDeleteList = otherSelectedList;
      }
      this.searchForm.list.splice(index, 1, row);
    },
    // 获取列表
    getList() {
      this.batchDeleteList = [];
      deviceAuth_list({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        regionid: this.searchForm.regionid,
        page: this.searchForm.page,
        size: this.searchForm.size,
        sn: this.searchForm.sn,
        snState: this.searchForm.snState
      }).then((data) => {
        if (data.code === 0) {
          this.searchForm.list = data.obj.data;
          this.searchForm.total = data.obj.total;
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    toAdd() {
      this.addInfo = {
        daid: null,
        rversion: null,
        show: true,
        regionid: null,
        sn: null,
        snState: null,
        comm: ""
      };
    },
    saveAddInfo() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addInfo.show = false;
          let api =
            this.addInfo.daid && this.addInfo.rversion
              ? deviceAuth_edit
              : deviceAuth_add;
          let form = {
            rtype: this.powerParams.rtype,
            objectid: this.powerParams.objectid,
            regionid: this.addInfo.regionid,
            sn: this.addInfo.sn,
            comm: this.addInfo.comm
          };
          if (this.addInfo.daid && this.addInfo.rversion) {
            form.daid = this.addInfo.daid;
            form.snState = this.addInfo.snState;
            form.rversion = this.addInfo.rversion;
          }
          api(form).then((data) => {
            if (data.code === 0) {
              this.searchList();
              this.$Message.success(data.msg);
            } else {
              this.$Message.error(data.msg);
            }
          });
        }
      });
    },
    toEdit(row) {
      this.addInfo = {
        daid: row.daid,
        rversion: row.rversion,
        show: true,
        regionid: row.regionid,
        sn: row.sn,
        snState: row.snState,
        comm: row.comm
      };
    },
    // 删除
    toDel(row) {
      this.$Modal.confirm({
        title: "提示",
        content: `您确定删除【${row.sn}】吗？`,
        onOk: () => {
          deviceAuth_delete({
            rtype: this.powerParams.rtype,
            objectid: this.powerParams.objectid,
            daid: row.daid,
            rversion: row.rversion
          }).then((data) => {
            if (data.code === 0) {
              this.searchList();
              this.$Message.success(data.msg);
            } else {
              this.$Message.error(data.msg);
            }
          });
        },
        onCancel: () => {}
      });
    },
    toBatchDelete() {
      if (this.batchDeleteList.length === 0) {
        this.$Message.error("请选择数据");
        return;
      }
      this.$Modal.confirm({
        title: "提示",
        content: `您确定要批量删除选中的 ${this.batchDeleteList.length} 条数据吗？`,
        onOk: () => {
          deviceAuth_batch_delete(this.batchDeleteList).then((data) => {
            if (data.code === 0) {
              this.searchList();
              this.$Message.success(data.msg);
            } else {
              this.$Message.error(data.msg);
            }
          });
        },
        onCancel: () => {}
      });
    }
  }
};
</script>

<style lang="less" scoped>
.search_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 16px;
  .search_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .search_right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .primary_btn {
      margin-left: 16px;
    }
  }
}
</style>
