<template>
  <div class="ghzc ResourceShare">
    <div class="innerContainer" v-drag>
      <custom-form ref="formRef" :model="model" :config="formConfig">
        <template #time>
          <el-date-picker
            v-model="model.sj"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="datepicker"
            size="mini"
            @change="changedate"
          >
          </el-date-picker>
        </template>
        <template #type>
          <el-select v-model="model.placeCode" placeholder="申请状态">
            <el-option
              v-for="item in optionList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </template>
        <template #action>
          <!-- v-hasPermi="['monitor:job:add']" -->
          <el-button size="mini" @click="getTableData">查询</el-button>
          <el-button size="mini" @click="reset()">重置</el-button>
        </template>
      </custom-form>
      <!-- :total="table.total"
    :tableArrDate="table.data" -->
      <customForm></customForm>
      <tablePage
        class="tablePage"
        :cloumn="cloumn"
        :table="table"
        ref="tableDialogRef"
        @currentChange="searchFun"
      >
        <template #apptype="{ row }">
          <div :class="`type${row.type}`">{{ row.typeN }}</div>
        </template>
        <template #url="{ row }">
          <div v-if="row.url" @click="copyText(row.url)">
            {{ row.url }}
            <i class="el-icon-document-copy usable"></i>
          </div>
        </template>
        <template #action="{ row }">
          <span class="usable" @click="detail(row)">详情</span>
          <span :class="{ usable: row.type == 0 }" @click="reset(row)"
            >撤回</span
          >
        </template>
      </tablePage>
    </div>
    <addEdt ref="addEdtModal" @close="closeMdel"></addEdt>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import tablePage from "@/components/mapView/tablePage.vue";
import customForm from "@/components/mapView/custom-form.vue";
import addEdt from "./components/addEdtModal.vue";
import { FormConfig, TableHeader } from "./config";
export default {
  components: {
    tablePage,
    customForm,
    addEdt,
  },
  props: {},
  data() {
    return {
      model: {
        carNo: "", //网格名称
        regionCode: "", //地区编码
        placeCode: "", //所属小区
      },
      formConfig: FormConfig,
      cloumn: TableHeader,
      table: {
        data: [
          { JGMC: "ssmdmm", type: 0, typeN: "正在审核" },
          {
            JGMC: "ssmdmm",
            type: 1,
            time: "2024/9/3",
            typeN: "审核通过",
            url: "snsd",
            list: [
              { time: "2024/9/3", jg: "申请通过" },
              { time: "2024/8/13", jg: "申请通过" },
            ],
          },
          {
            JGMC: "ssmdmm",
            type: 2,
            typeN: "审核不通过",
            list: [
              { time: "2024/9/3", jg: "申请通过" },
              { time: "2024/8/13", jg: "申请通过" },
            ],
          },
          { JGMC: "ssmdmm", type: 3, typeN: "已撤回" },
        ],
        total: 0,
      },
    };
  },
  methods: {
    searchFun(page) {
      this.getTableData({ pageNo: page.pageIndex, pageSize: page.size });
    },
    async getTableData(params) {
      let obj = {
        jscType: store.state.cockpit_vector.tablejscType,
        beginTime: store.state.cockpit_date[0],
        endTime: store.state.cockpit_date[1],
        id: store.state.cockpit_region.id,
        ...params,
      };
      let data = await QueryList(obj);
      this.active_dableData = data.data;
      this.tab.data = data.data;
    },
    // 详情
    detail(row) {
      this.$refs.addEdtModal.Init("info", row);
    },
    reset(row) {
      if (row.type == 0) this.$refs.addEdtModal.Init("withdraw", row);
    },
    copyText(text) {
      this.$copyText(text).then(
        () => {
          this.$message.success("复制成功");
        },
        () => {
          this.$message.error("该浏览器不支持自动复制");
        }
      );
    },
    closeMdel() {},
  },
  computed: {},
  watch: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../resource.scss";
</style>
<style lang="scss">
@import "../../cockpit/datePicker.scss";
</style>