<template>
  <div style="margin: 20px">
    <a-row style="margin-bottom: 20px">
      <a-button type="primary" @click="handleCreate">添加</a-button>
    </a-row>
    <a-table
      :columns="tableCols"
      :data-source="tableRows"
      :loading="loading"
      :rowKey="idName"
      @change="handleTableChange"
    >
      <span slot="anyone" slot-scope="isanyone">
        <a-tag v-if="isanyone"> 是 </a-tag>
        <a-tag v-else> 否 </a-tag>
      </span>
      <span slot="project" slot-scope="project">
        <a-tag v-if="project !== null">
          {{ project.name }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="record">
        <a-button size="small" type="link" @click="() => handleDetail(record)"
          >查看</a-button
        >
        <a-divider type="vertical" />
        <a-button type="danger" size="small" @click="() => handleDelete(record)"
          >删除</a-button
        >
      </span>
    </a-table>
    <a-modal
      v-model="visible"
      :title="isCreate ? '添加设备' : '查看设备'"
      :destroyOnClose="true"
      :footer="null"
    >
      <device-detail
        :detail="record"
        @ok="handleOk"
        @cancle="visible = false"
      />
    </a-modal>
  </div>
</template>

<script>
import { deleteJSON, patchJSON, postJSON, getData, URL_MAP } from "@/utils/http";
import DeviceDetail from "../forms/DeviceDetail.vue";
export default {
  components: { DeviceDetail },
  data() {
    return {
      tableRows: [],
      tableCols: [
        {
          dataIndex: "_id",
          key: "_id",
          title: "设备ID",
        },
        {
          dataIndex: "device_name",
          key: "device_name",
          title: "设备名称",
        },
        {
          dataIndex: "device_uint",
          key: "device_uint",
          title: "设备型号",
        },
        {
          dataIndex: "isanyone",
          key: "isanyone",
          title: "是否公开",
          scopedSlots: { customRender: "anyone" },
        },
        {
          dataIndex: "project",
          key: "project",
          title: "所属项目",
          scopedSlots: { customRender: "project" },
        },
        {
          key: "action",
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      pages: {},
      loading: false,
      listUrl: URL_MAP.DEVICE_LIST,
      detailUrl: URL_MAP.DEVICE_DETAIL,
      idName: "_id",
      visible: false,
      record: {},
      isCreate: false,
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
    },
    async fetch(params) {
      this.loading = true;
      try {
        let results = await getData(this.listUrl, params);
        let data = results.data;
        const pagination = { ...this.pages };
        console.log(data)
        pagination.total = data.length;
        this.tableRows = data;
        this.pages = pagination;
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    handleDetail(record) {
      this.visible = true;
      this.record = record;
    },
    async handleDelete(record) {
      this.loading = true
      try{
        await deleteJSON(URL_MAP.DEVICE_DETAIL, { 'id': record._id })
        await this.fetch({})
      }catch(e) 
      {
        console.log(e)
      }
      finally{
        this.loading = false
      }
    },
    async handleOk(form) {
      this.visible = false;
      this.loading = true;
      try {
        if (!this.isCreate) {
          form["id"] = form["_id"];
          // console.log(form)
          let data = await patchJSON(URL_MAP.DEVICE_DETAIL, form);
        } else {
          form["id"] = form["_id"];
          let data = await postJSON(URL_MAP.DEVICE_LIST, form);
        }
        await this.fetch({});
      } catch (e) {
        console.log(e);
      } finally {
        this.isCreate = false;
        this.loading = false;
      }
    },
    handleCreate() {
      this.isCreate = true
      this.visible = true
      this.record = {
        '_id':'',
        'device_name':'',
        'device_uint':'',
        'isanyone':false,
        'state':0,
        'sensors':[],
        'project':null
      }
    }
  },
  mounted() {
    this.fetch({});
  },
};
</script>

<style>
</style>