<template>
  <el-card class="content-div">
    <div class="all-content">
      <div class="top-div">
        <el-button type="primary" size="large" @click="addData">新增</el-button>
      </div>
      <el-table :data="tableData"  border :row-class-name="tableRowClassName"
        :header-cell-style="{ background: '#F6F7FC' }" size="large">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="driver_name" label="驱动名称" width="200" align="center" show-overflow-tooltip />
        <el-table-column prop="driver_description" label="驱动描述" align="center" show-overflow-tooltip />
        <el-table-column prop="driver_type" label="驱动类型" width="200" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ qudongOptions[scope.row.driver_type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="template_name" label="通讯模板" width="200" align="center">
        </el-table-column>
        <el-table-column prop="driver_status" label="驱动状态" width="200" align="center">
          <template #default="scope">
            <span> {{ txStatus[scope.row.driver_status] }}  </span>
          </template>
        </el-table-column>
        <el-table-column prop="driver_enable" label="启停控制" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" size="large" @click="changeStatus(scope.row)" v-if="!scope.row.driver_enable">
              启用
            </el-button>
            <el-button size="large"  @click="changeStatus(scope.row)" v-else>
              停用
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" show-overflow-tooltip width="450">
          <template #default="scope">
            <el-button type="primary" size="large" @click="viewData(scope.row)">
              设备
            </el-button>
            <el-button type="warning" size="large" @click="openPz(scope.row)">
              配置
            </el-button>
            <el-button  size="large" @click="editData(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="large" @click="delData(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddData
      :formData="formData"
      :type="type"
      :qudongOptions="qudongOptions"
      :dialogVisible="dialogVisible"

      v-if="dialogVisible"
      @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess"
    ></AddData>
    <PzSet
      :dialogVisible="dialogVisible3"
      :formData="formData"
      :pztype="pztype"
      :pztypecode="pztypecode"
      v-if="dialogVisible3"
      @dialogClose="dialogClose3"
      @dialogSuccess="dialogSuccess3"
    >
    </PzSet>
    <Details
      :formData="formData"
      :dialogVisible="dialogVisible4"
      v-if="dialogVisible4"
      @dialogClose="dialogClose4"
      @dialogSuccess="dialogSuccess4"
    >
    </Details>
    <AddData :formData="formData" :type="type" :qudongOptions="qudongOptions" :dialogVisible="dialogVisible"
      v-if="dialogVisible" @dialogClose="dialogClose" @dialogSuccess="dialogSuccess"></AddData>
    <ViewSet :formData="formData" :qudongOptions="qudongOptions" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess">
    </ViewSet>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AddData from "@/components/AddData.vue";
import PzSet from "@/components/PzSet.vue";
import Details from "@/components/Details.vue";
import ViewSet from "@/components/ViewSet.vue";
export default {
  name: "page",
  components: {
    AddData,
    PzSet,
    Details,
    ViewSet
  },
  setup() {
    const state = reactive({
      qudongOptions: [],
      tableData: [],
      formData: {},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      type: '0', // 0新增 1 编辑
      pztype: '',
      pztypecode: '',
      txStatus: [] //通讯状态
    });

    onMounted(() => {
      getTxSupport();
      getTableData();
      getTxStatus();
    });
    // 获取通讯驱动
    const getTxSupport = async () => {

      const res = await infoApi.getTxSupport();
      if (res.code == 0) {
        state.qudongOptions = res.data;
      }


    };
    // 获取通讯状态
    const getTxStatus = async () => {

      const res = await infoApi.getTxStatus();
      if (res.code == 0) {
        state.txStatus = res.data;
      }


    };
    const getTableData = async () => {
      const res = await infoApi.getTx();
      if (res.code == 0) {
        state.tableData = res.data && res.data.length > 0 && res.data.sort((a,b) => {
          return (a.driver_name > b.driver_name ? 1 : -1)
        });
      }
    };
    const dialogClose = () => {
      state.dialogVisible = false;
      state.dialogVisible1 = false;
      state.dialogVisible2 = false;
    };

    const dialogSuccess = () => {
      state.dialogVisible = false;
      getTableData();
    };

    const dialogClose1 = () => {
      state.dialogVisible1 = false;
    };

    const dialogClose3 = () => {
      state.dialogVisible3 = false;
    };
    const dialogClose4 = () => {
      state.dialogVisible4 = false;
    };
    const dialogSuccess3 = () => {
      state.dialogVisible3 = false;
      getTableData();
    };
    const dialogSuccess4 = () => {
      state.dialogVisible4 = false;
    };

    const dialogSuccess1 = () => {
      state.dialogVisible1 = false;
      state.dialogVisible2 = false;
      getTableData();
    };


    const addData = () => {
      state.formData = {
        driver_name: '',
        driver_type: 2,
        driver_description: '',
      };
      state.dialogVisible = true;
      state.type = '0';
    };

    const editData = (item) => {
      state.formData = JSON.parse(JSON.stringify(item));
      state.dialogVisible = true;
      state.type = '1'
    };

    const delData = (item) => {
      if(item.status == 2) {
        ElMessage.warning("无法删除正在运行的驱动，请先手动停止后再删除");
        return;

      }
      ElMessageBox.confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let param = {
            name: item.name
          }
          const res = await infoApi.delTx(param);
          if (res.code == 0) {
            ElMessage.success(res.message || "删除成功");
            getTableData();
          } else {
            ElMessage.error(res.message | "删除失败");
          }
        })
        .catch(() => {
          ElMessage.info("已取消删除");
        });
    };

    const manageData = (item) => {
      state.formData = JSON.parse(JSON.stringify(item));
      state.dialogVisible1 = true;
    };

    const viewData = (item) => {
      state.dialogVisible2 = true;
      state.formData = JSON.parse(JSON.stringify(item));
    }

    const changeStatus = async (item) => {
      const param = {
        driver_name: item.driver_name,
      }
      const res = !item.driver_enable ? await infoApi.startStatus(param) : await infoApi.stopStatus(param);
      if (res.code == 0) {
        ElMessage.success(res.message || "请求成功");
        getTableData();
      } else {
        ElMessage.error(res.message);
      }
    };

    const openPz = (item) => {
      state.dialogVisible3 = true;
      state.pztype = state.qudongOptions[item.type];
      state.pztypecode = item.type;
      state.formData = JSON.parse(JSON.stringify(item));
    }
    const openDetails = (item) => {
      state.formData = JSON.parse(JSON.stringify(item));
      state.dialogVisible4 = true;
       
    }

    const tableRowClassName = ({ row, rowIndex }) => {
      if(row.status == 1) {
        return ''
      }
      if(row.status == 2) {
        return 'green'
      }
      if(row.status == 3) {
        return 'red'
      }
 
    }

    return {
      ...toRefs(state),
      addData,
      editData,
      delData,
      manageData,
      dialogClose,
      dialogSuccess,
      changeStatus,
      dialogClose1,
      dialogSuccess1,
      dialogClose3,
      dialogClose4,
      dialogSuccess3,
      dialogSuccess4,
      openPz,
      openDetails,
      viewData,
      tableRowClassName
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
}

.top-div {
  display: flex;
  justify-content: flex-end;
}

.txStatusDiv {
  padding: 0 15px;
  border-radius: 10px;
  color: #fff;
}
.stop {
  color: red;
}
.start {
  color: #009fa4;
}

</style>
