<template>
  <div class="page justify-around">
    <div class="addbtn">
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%; height: 90%"
      size="large"
      align="center"
    >
      <el-table-column
        prop="name"
        :label="$t('businessMangage.name')"
        width="200"
        align="center"
      />

      <el-table-column
        prop="address"
        :label="$t('businessMangage.address')"
        width="200"
        align="center"
      />

      <el-table-column
        prop="status"
        :label="$t('businessMangage.status')"
        width="200"
        align="center"
      >
        <template #default="scope">
          <span
            :style="1 * scope.row.status ? 'color: #ff0000' : 'color: #36db43'"
            >{{ getStatus(scope.row.status) }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        prop="code"
        :label="$t('businessMangage.code')"
        width="200"
        align="center"
      />

      <el-table-column
        prop="createTime"
        :label="$t('businessMangage.createTime')"
        width="200"
        align="center"
      >
        <template #default="scope">
          {{ getDate(scope.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        :label="$t('keyMangage.operations')"
        width="200"
        align="center"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="showDetail(scope.row.id)"
            >{{ $t("keyMangage.check") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      :title="$t('businessMangage.addNew')"
      width="35%"
      :before-close="handleClose"
    >
      <div class="formData">
        <el-form
          ref="ruleForm"
          label-position="left"
          label-width="120px"
          :model="formData"
          :rules="rules"
        >
          <el-form-item :label="$t('businessMangage.name') + '：'" prop="name">
            <el-input
              v-model="formData.name"
              :placeholder="$t('businessMangage.nameInputText')"
            />
          </el-form-item>

          <el-form-item
            :label="$t('businessMangage.address') + '：'"
            prop="address"
          >
            <el-input
              v-model="formData.address"
              :placeholder="$t('businessMangage.addressInputText')"
            />
          </el-form-item>

          <el-form-item :label="$t('businessMangage.code') + '：'" prop="code">
            <el-input
              v-model="formData.code"
              :placeholder="$t('businessMangage.codeInputText')"
            />
          </el-form-item>

          <el-form-item
            :label="$t('businessMangage.accessMethod') + '：'"
            prop="type"
          >
            <el-select
              v-model="formData.type"
              :placeholder="$t('businessMangage.typeInputText')"
              clearable
            >
              <el-option
                v-for="(item, index) in accessMethods"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{
            $t("businessMangage.cancel")
          }}</el-button>
          <el-button type="primary" @click="addNew(ruleForm)">
            {{ $t("businessMangage.confirm") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<!-- videoType==1为竖,==2为横 -->
<script setup>
//#region  导入
import { linkEmits } from "element-plus";
import { getCurrentInstance } from "vue";

import { businessListApi, addBusinessApi } from "@/api_mangage/business.js";

import { useI18n } from "vue-i18n";

import dayjs from "dayjs";

import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

const tableData = ref([]);

const dialogVisible = ref(false);

const showDetail = (id) => {
  router.push({
    path: "/businessCheck",
    query: {
      id,
    },
  });
};

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getStatus = (val) => {
  return val * 1 ? "锁定" : "正常";
};

const getDate = (val) => {
  return dayjs(val).format("YYYY-MM-DD");
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  getBusinessListFunc(pageNum.value, pageSize.value);
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  getBusinessListFunc(pageNum.value, pageSize.value);
};

const getBusinessListFunc = async (PageNum, PageSize) => {
  try {
    const res = await businessListApi(PageNum, PageSize);
    console.log(res, "res");
    tableData.value = res.data.list;
    total.value = res.data.total * 1;
  } catch (error) {
    console.log(error, "err");
  }
};

const formData = ref({
  name: "",
  address: "",
  code: "",
  type: "",
});

const rules = {
  name: [
    {
      required: true,
      message: "Please input name",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "Please input address",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "Please input code",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      message: "Please select access methods",
      trigger: "blur",
    },
  ],
};

const accessMethods = ref([
  {
    label: "api接入",
    value: 1,
  },
  {
    label: "私有化接入",
    value: 2,
  },
]);

const handleClose = () => {
  dialogVisible.value = false;
  setTimeout(() => {
    formData.value = {
      name: "",
      address: "",
      code: "",
      type: "",
    };
  }, 500);
};

const ruleForm = ref();

const addNew = async (refForm) => {
  if (!refForm) return;
  await refForm.validate(async (valid, fields) => {
    if (valid) {
      const data = formData.value;
      try {
        const res = await addBusinessApi(data);
        console.log(res, "res");
        if (res.code == 200) {
          ElMessage.success("添加成功！");
          dialogVisible.value = false;
        }
        getBusinessListFunc(1, 10);
        pageNum.value = 1;
        pageSize.value = 10;
      } catch (error) {
        console.log(error, "err");
        ElMessage.error(error.message);
      }
    } else {
      ElMessage.error("请完善信息！");
    }
  });
};

onMounted(() => {
  getBusinessListFunc(1, 10);
});
</script>

<style lang="scss" scoped>
.page {
  height: calc(100vh - 80px);
  // height: calc(100vh - 80px);
  background-color: #ffffff;
  border-radius: 30px 0 0 0;
  overflow: hidden;
  padding: 10vh;
  .addbtn {
    margin-bottom: 2vh;
  }
  .formData {
    padding: 5vh 3vh;
  }

  .pagination {
    position: fixed;
    left: 55%;
    bottom: 8vh;
    transform: translateX(-50%);
    border-radius: 5px;
    padding: 10px 20px;
    z-index: 99;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      background-color: #b8b8b873;
    }
  }
}
</style>
