<template>
  <div class="mainContentBox">


    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
      @selection-change="selectionChange"
    >

      <template #menu="{row,index,type}">
        <el-button @click="viewFault(row)"
                   icon="el-icon-view"
                   text
                   type="primary"
        >查看</el-button>
          <el-button
                  v-if="row.currentState==='5'"
                  size="small"
                  type="primary"
                  @click="handleScanCode(row.id)"
          >二维码生成
          </el-button>
      </template>


    </avue-crud>

    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="900px"
      @close="dialog.visible = false"
      :destroy-on-close="true"
    >
      <FaultDetail  :escalationFaultId="fault.id" :dialog="dialog" />
    </el-dialog>
    <el-dialog
      v-model="dialog3.visible"
      :title="dialog3.title"
      width="950px"
      @close="
        dialog3.visible = false;
        scanCodeArray = [];
      "
    >
      <div class="scanInfo">
        <div style="padding: 0 20px; text-align: center">
          二维码数量:{{ scanCodeArray.length }}
        </div>
        <el-scrollbar class="scrollbarA">
          <div
            :style="
              scanCodeArray.length == 1 ? '   justify-content: center;' : ''
            "
            class="box"
          >
            <div
              v-for="(item, index) in scanCodeArray"
              :key="index"
              class="scancodeitem"
            >
              <div class="qrcodeItem">
                <vue-qrcode :value="item" error-level="low" size="70" />
              </div>
            </div>
          </div>

          <div v-if="scanCodeArray.length < 1">暂无数据</div>
        </el-scrollbar>
      </div>
    </el-dialog>

  </div>
</template>
<script setup>
  import { ref, getCurrentInstance } from "vue";
  import { useCrud } from "@/hooks/userCrud";
  import ButtonPermKeys from "@/common/configs/buttonPermission";
  import { columns } from "./columns";
  import { useCommonStoreHook, useDictionaryStore } from "@/store";
  import FaultDetail from "@/views/quality/faultHandle/components/fault-detail.vue"
  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  // 数据字典相关
  const { dicts } = useDictionaryStore();
  import {getFaultScanCode} from "@/api/fault";

  const test = () => {
    isShowTable.value = true;
    tableType.value = tableType.value == 1 ? 2 : 1;
  };
  const dialog = ref({
    title: "报故详情",
    visible: false,
  });
  const dialog3 = reactive({
    title: "二维码详情",
    visible: false,
  });
  const fault=ref({});
  const faultInfo=ref({});
  const faultEs=ref({});
  const faultExa=ref({});
  const faultEdit=(row)=>{

    faultInfo.value.id=row.id;

    dialog1.value.visible=true;
  }
  const faultThaw=(row)=>{
    faultEs.value.id=row.id;
    dialog2.value.visible=true;
  }
  function useScanCode() {
    const scanCodeArray = ref([]);

    const handleScanCode = async (id) => {
      const { data, code } = await getFaultScanCode(id);
      scanCodeArray.value = data;
      dialog3.visible = true;
    };
    return { scanCodeArray, handleScanCode };
  }

  const { scanCodeArray, handleScanCode } = useScanCode();
  const faultExamine =(row)=>{
    faultExa.value.id=row.id;
    dialog3.value.visible=true;
  }
  const closeFault=()=>{
    dialog3.value.visible=false;
    dataList();
  }
  // 传入一个url，后面不带/
  const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
    useCrud({
      src: "/api/v1/process/escalationFault",
    });
  const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
    Methords; //增删改查
  const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  // const permission = reactive({
  //   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  //   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  //   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  //   menu: true,
  // });

  const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  const router = useRouter();
  const viewFault = (row) => {

    fault.value.id=row.id;
    console.info(fault)
    dialog.value.visible=true;
  };
  onMounted(() => {
    // console.log("crudRef", crudRef)
    dataList();
  });

  const searchChangeState=()=>{
    dataList();
  }



  // 设置表格列或者其他自定义的option
  option.value = Object.assign(option.value, {
    addBtn: false,
    editBtn:false,
    delBtn:false,
    viewBtn:false,
    column: columns,
  });


</script>
<style lang="scss" scoped>
.scanInfo {
  width: 100%;

  .scrollbar {
    padding: 20px;
    height: 350px;

    .item {
      margin: 20px 0;
      width: 100%;
      background-color: #80808030;
      border-radius: 16px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .el-icon {
        width: 50px;
        height: 50px;
        color: red;
        cursor: pointer;
      }
    }

    .scancodeitem {
      width: 300px;
      height: 300px;
      margin: 0 20px;
      display: inline-block;
      border-radius: 16px;
      border: 1px solid black;
      padding-top: 10px;

      .qrcodeItem {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .bottombtn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .scrollbarA {
    padding: 20px;
    height: 350px;

    .box {
      display: flex;
      align-items: center;

      .item {
        margin: 20px 0;
        width: 100%;
        background-color: #80808030;
        border-radius: 16px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .el-icon {
          width: 50px;
          height: 50px;
          color: red;
          cursor: pointer;
        }
      }

      .scancodeitem {
        width: 300px;
        height: 300px;
        margin: 0 20px;
        display: inline-block;
        border-radius: 16px;
        border: 1px solid black;
        padding-top: 10px;

        .qrcodeItem {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
