<template>
  <div>
    <div class="gva-search-box">
      <div class="gva-btn-list">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="电脑编号">
            <el-input
              v-model="searchInfo.pc_num"
              placeholder="编号"
              size="small"
            />
          </el-form-item>
          <el-form-item label="供应商">
            <el-select v-model="searchInfo.shop_id" size="small">
              <el-option
                v-for="item in shopOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="套餐">
            <el-select v-model="searchInfo.set_meal_id" size="small"
              ><el-option
                v-for="item in setMealOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            /></el-select>
          </el-form-item>
          <el-form-item label="是否到期">
            <el-select v-model="searchInfo.is_expire" size="small">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
              <el-option label="明日到期" value="2" />
              <el-option label="一周内到期" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="使用人">
            <el-select v-model="searchInfo.director_name" size="small">
              <el-option
                v-for="item in directorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否下架">
            <el-select v-model="searchInfo.is_off_shelf" size="small">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="search"
              @click="onSubmit"
              >查询</el-button
            >
            <el-button size="small" icon="refresh" @click="onReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="row center">
      <el-tag size="large">电脑数量 : {{ computerNum }} </el-tag>
    </div>
    <div class="gva-table-box">
      <!-- <el-scrollbar height="550px"> -->
      <el-table
        height="500px"
        :data="tableData"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        border
        v-loading="loading"
      >
        <el-table-column type="index" width="55" />
        <el-table-column
          align="left"
          label="编号"
          min-width="80"
          prop="pc_num"
        />
        <el-table-column
          align="left"
          label="名称"
          min-width="80"
          prop="pc_name"
        />
        <el-table-column
          align="left"
          label="供应商"
          min-width="70"
          prop="shop_name"
        />
        <!-- <el-table-column
            align="left"
            label="套餐"
            min-width="100"
            prop="set_meal_name"
          /> -->
        <el-table-column
          align="center"
          label="套餐"
          min-width="150"
          prop="set_meal_name"
        >
          <template #default="scope">
            <span v-if="scope.row.price_type == 0">{{
              scope.row.set_meal_name + "-天卡(" + scope.row.rent_price + "元)"
            }}</span>
            <span v-else-if="scope.row.price_type == 1">{{
              scope.row.set_meal_name + "-周卡(" + scope.row.rent_price + "元)"
            }}</span>
            <span v-else>{{
              scope.row.set_meal_name + "-月卡(" + scope.row.rent_price + "元)"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="使用人"
          min-width="80"
          prop="director_name"
        />
        <el-table-column
          align="center"
          label="是否到期"
          min-width="100"
          prop="is_expire"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.is_expire == 3"
              size="small"
              type="warning"
              plain
              >即将到期</el-button
            >
            <el-button
              v-else-if="scope.row.is_expire == 2"
              size="small"
              type="danger"
              plain
              >明日到期</el-button
            >
            <el-button
              v-else-if="scope.row.is_expire == 1"
              size="small"
              type="info"
              plain
              >到期未续</el-button
            >
            <el-button v-else size="small" type="success" plain
              >在租期中</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="是否下架"
          min-width="100"
          prop="is_off_shelf"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.is_off_shelf == 1"
              size="small"
              type="warning"
              plain
              >是</el-button
            >
            <el-button v-else size="small" type="success" plain>否</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="TD号"
          min-width="100"
          prop="todesk_id"
        />
        <el-table-column
          align="left"
          label="TD密码"
          min-width="100"
          prop="todesk_password"
        />
        <el-table-column
          align="left"
          label="向日葵号"
          min-width="100"
          prop="sunflower_id"
        />
        <el-table-column
          align="left"
          label="向日葵密码"
          min-width="100"
          prop="sunflower_password"
        />
        <el-table-column
          align="left"
          label="最近一次修改日志"
          min-width="250"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-row>
              <el-col :span="20">
                <span
                  style="
                    display: block;
                    max-width: 15em;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                  >{{ scope.row.remark }}</span
                >
              </el-col>
              <el-col :span="4">
                <el-button
                  size="small"
                  type="warning"
                  link
                  icon="tickets"
                  @click="switchLog(scope.row)"
                  >more</el-button
                >
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="更新时间"
          min-width="150"
          prop="update_time"
        />
        <el-table-column align="left" fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              link
              icon="link"
              @click="linkTd(scope.row)"
              >TD连接</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-scrollbar> -->
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!--日志-->
    <el-dialog v-model="visible_log" title="操作日志">
      <el-table :data="logData">
        <el-table-column property="create_time" label="操作时间" width="150" />
        <el-table-column property="pc_num" label="租机编号" width="80" />
        <el-table-column property="log" label="日志" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "computer",
};
</script>

<script setup>
import {
  getRentComputerList,
  getRentComputerNum,
  listRentComputerShopList,
  listRentSetMealList,
  queryRentComputerLogByPcNum,
} from "@/api/rentComputer";
import { getDirectorList } from "@/api/responsiblePerson";
import { useUserStore } from "@/pinia/modules/user";
import { toSQLLine } from "@/utils/stringFun";
import { ref } from "vue";
import { ElMessage, ElLoading } from "element-plus";

const visible_log = ref(false);
const logData = ref([]);
const page = ref(1);
const total = ref(0);
const pageSize = ref(20);
const tableData = ref([]);
const loading = ref(false);
const searchInfo = ref({});
const computerNum = ref("");
const shopOptions = ref();
const directorOptions = ref();
const setMealOptions = ref();
// 查询日志
async function switchLog(rowData) {
  const loadingLog = ElLoading.service({
    lock: true,
    text: "查询日志中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let logForm = {
    pc_num: rowData.pc_num,
    shop_id: Number(rowData.shop_id),
    // set_meal_id: Number(rowData.set_meal_id),
  };
  // console.log(logForm);
  const data = await queryRentComputerLogByPcNum(logForm);
  if (data.code == 0) {
    visible_log.value = true;
    loadingLog.close();
    // ElMessage.success(data.msg);
    logData.value = data.data.list;
  } else {
    ElMessage.error(data.msg);
  }
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  getTableData();
};
const onReset = () => {
  searchInfo.value = {};
};
const handleCurrentChange = (val) => {
  page.value = val;
  getTableData();
};

// 排序
const sortChange = ({ prop, order }) => {
  if (prop) {
    if (prop === "id") {
      prop = "id";
    }
    searchInfo.value.orderKey = toSQLLine(prop);
    searchInfo.value.desc = order === "descending";
  }
  getTableData();
};

// 搜索
const onSubmit = () => {
  page.value = 1;
  pageSize.value = 20;

  if (typeof searchInfo.value.set_meal_id != "undefined") {
    searchInfo.value.set_meal_id = Number(searchInfo.value.set_meal_id);
  }
  if (typeof searchInfo.value.is_expire != "undefined") {
    searchInfo.value.is_expire = Number(searchInfo.value.is_expire);
  }
  if (typeof searchInfo.value.is_off_shelf != "undefined") {
    searchInfo.value.is_off_shelf = Number(searchInfo.value.is_off_shelf);
  }

  // console.log(searchInfo);

  getTableData();
};

// 查询
const getTableData = async () => {
  loading.value = true;
  const table = await getRentComputerList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value,
  });
  if (table.code === 0) {
    tableData.value = table.data.list;
    total.value = table.data.total;
    page.value = table.data.page;
    pageSize.value = table.data.pageSize;
    // getSpanArr(table.data.list);
    getComputerNum();
    getSelectList();
  }
  loading.value = false;
};

//获取下拉框list
const getSelectList = async () => {
  //listRentComputerShopList
  const rentComputerShop = await listRentComputerShopList({
    page: 1,
    pageSize: 999,
  });
  let rentComputerShopList = [];
  const data = rentComputerShop.data.list;
  data.forEach((e) => {
    rentComputerShopList.push({ value: e.id, label: e.name });
  });
  shopOptions.value = rentComputerShopList;
  //listRentSetMealList
  const setMealShop = await listRentSetMealList({
    page: 1,
    pageSize: 999,
  });
  let setMealList = [];
  const data2 = setMealShop.data.list;
  data2.forEach((e) => {
    var priceStr = "";
    if (e.price_type == 0) {
      priceStr = "天卡(" + e.rent_price + "元)";
    } else if (e.price_type == 1) {
      priceStr = "周卡(" + e.rent_price + "元)";
    } else {
      priceStr = "月卡(" + e.rent_price + "元)";
    }
    setMealList.push({
      value: e.id,
      label: e.shop_name + "-" + e.name + "-" + priceStr,
    });
  });
  setMealOptions.value = setMealList;
  //游戏负责人列表===============================
  const directorRes = await getDirectorList();
  let directorList = [
    { value: "ALL", label: "所有机器" },
    // { value: "", label: "备用" },
  ];
  const data3 = directorRes.data.list;
  data3.forEach((e) => {
    directorList.push({ value: e.name, label: e.name });
  });
  directorOptions.value = directorList;
};

// 查询
const getComputerNum = async () => {
  const table = await getRentComputerNum({ ...searchInfo.value });
  if (table.code === 0) {
    // console.log(table.data);
    computerNum.value = table.data;
  }
};
//拉起TD连接
const linkTd = async (row) => {
  let todesk_id = row.todesk_id;
  let todesk_password = row.todesk_password;
  todesk_id = todesk_id.replace(/\s*/g, "");
  todesk_password = todesk_password.replace(/\s*/g, "");
  // console.log(todesk_id);
  // console.log(todesk_password);
  if (todesk_id == "" || todesk_password == "") {
    ElMessage({
      type: "error",
      message: "todesk账号密码不完整!",
    });
  } else {
    window.location.href =
      "ToDesk://connect&" + todesk_id + "&" + todesk_password;
  }
};
getTableData();
</script>

<style scoped lang="scss">
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>
