<template>
  <!-- 巡逻艇 -->
  <div class="__normal-page">
    <div class="__normal-content">
      <CusContent
        v-model:tableHead="tableHead"
        @handleReset="handleReset"
        @handleSearch="onSearch"
        :text="queryText"
        @handleText="handleText"
        :slotFieldOut="true"
        :slotFieldIn="true"
        :showText="true"
        v-model:full="isFull"
      >
        <template #top>
          <el-card>这是个顶部的图表</el-card>
        </template>
        <template #fieldOut>
          <CusForm labelWidth="100px" @handleEnter="onSearch">
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                filterSpan="1"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <template v-if="expandValue">
              <CusFormColumn
                  filterSpan="1"
                  label="船名号"
                  v-model:param="queryForm.shipId"/>
              <CusFormColumn
                  filterSpan="1"
                  label="船名号"
                  v-model:param="queryForm.shipId"/>
              <CusFormColumn
                  filterSpan="2"
                  link="select"
                  label="船舶用途"
                  v-model:param="queryForm.shipUse"
                  :options="$store.state.dictionary.pboatPurposeList"/>
              <CusFormColumn
                  filterSpan="1"
                  link="select"
                  label="船舶类型"
                  v-model:param="queryForm.patrolBoatType"
                  :options="$store.state.dictionary.pboatTypeList"/>
              <CusFormColumn
                  filterSpan="1"
                  link="select"
                  label="船舶类型"
                  v-model:param="queryForm.patrolBoatType"
                  :options="$store.state.dictionary.pboatTypeList"/>
              <CusFormColumn
                  filterSpan="1"
                  link="select"
                  label="船舶类型"
                  v-model:param="queryForm.patrolBoatType"
                  :options="$store.state.dictionary.pboatTypeList"/>
              <CusFormColumn
                  filterSpan="1"
                  link="select"
                  label="船舶类型"
                  v-model:param="queryForm.patrolBoatType"
                  :options="$store.state.dictionary.pboatTypeList"/>
              <CusFormColumn
                  filterSpan="1"
                  link="select"
                  label="状态"
                  v-model:param="queryForm.terminalStatus"
                  :options="$store.state.dictionary.devDutyStatusList"/>
            </template>
            <CusSearchButtons
                @handleReset="handleReset"
                @handleSearch="onSearch"
                v-model:expandValue="expandValue"
            />
          </CusForm>
        </template>
        <template #center>
          <el-card>这是个中间的图表</el-card>
        </template>
        <template #buttons>
          <btn-add/>
          <btn-delete @click="moreDelete"/>
          <btn-delete @click="moreDelete" title="权限按钮样例" v-if="$permissions.has('inside:equipment-management:ui-demo:button')"/>
        </template>
        <template #fieldIn>
          <CusForm labelWidth="100px" @handleEnter="onSearch">
            <CusFormColumn
                :span="12"
                label="一二三四五六七八九十"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                :span="12"
                label="一二三四五六七八九十"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                :span="12"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                :span="12"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                :span="12"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                :span="12"
                label="船名号"
                v-model:param="queryForm.shipId"/>
            <CusFormColumn
                link="datetime"
                :span="24"
                label="时间段"
                v-model:param="queryForm.date"/>
            <CusFormColumn
                :span="12"
                label="船名号"
                v-model:param="queryForm.shipId"/>
          </CusForm>
        </template>
        <template #table>
          <CusTable
            v-loading="loading"
            ref="ref_cusTable"
            :tableData="queryResult.tableData"
            :tableHead="tableHead"
            :total="queryResult.total"
            :page="queryPage.pageNum"
            :pageSize="queryPage.pageSize"
            @handlePage="handlePage"
            @handleSort="handleSort"
            @handleFilter="handleFilter"
            v-model:selected="selected"
            v-model:full="isFull"
          >
            <template #deptId-column-value="{ scope }">
              <CusPopover
                  :value="deptLoad
                        ? $store.state.app.deptTreeMap.get(scope.row.deptId)?.deptName
                        : scope.row.deptId"
              >
                <div>
                  {{
                    deptLoad
                        ? $store.state.app.deptTreeMap.get(scope.row.deptId)?.deptName
                        : scope.row.deptId
                  }}
                </div>
              </CusPopover>
            </template>
            <template #shipId-column-value="{ scope }">
              <CusPopover
                  :value="scope.row.shipId"
              >
                <el-link
                    @click="
                (showDialog = true),
                  (detail = Object.assign(scope.row, { isCheck: true }))
              "
                    href="javascript:;"
                    type="primary"
                >{{ scope.row.shipId }}</el-link
                >
              </CusPopover>
            </template>
            <template #patrolBoatType-column-value="{ scope }">
              <CusPopover
                  :value="$store.state.dictionary.pboatTypeMap.get(scope.row.patrolBoatType)"
              >
                <div>
                  {{
                    $store.state.dictionary.pboatTypeMap.get(scope.row.patrolBoatType)
                  }}
                </div>
              </CusPopover>

            </template>
            <template #shipUse-column-value="{ scope }">
              {{ $store.state.dictionary.pboatPurposeMap.get(scope.row.shipUse) }}
            </template>
            <template #terminalStatus-column-value="{ scope }">
              <span
                :class="
                  String(scope.row.terminalStatus) === '1'
                    ? 'text-green'
                    : String(scope.row.terminalStatus) === '2'
                    ? 'text-red'
                    : 'text-gray'
                "
              >
                {{
                  $store.state.dictionary.devDutyStatusMap.get(
                    scope.row.terminalStatus
                  ) || "未知"
                }}
              </span>
            </template>
            <template #boatLong-column="{ column }">
              <el-table-column label="222" prop="boatLong"/>
            </template>
            <template #caozuo-column-value="{ scope }">
              <el-link
                href="javascript:;"
                type="primary"
              >编辑</el-link>
              <el-link
                href="javascript:;"
                type="danger"
              >删除</el-link>
              <el-link
                href="javascript:;"
                type="primary"
              >调派记录</el-link>
            </template>
          </CusTable>
        </template>
      </CusContent>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    toRefs,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    computed,
  } from "vue";
  import { useStore } from "vuex";
  import { useRouter, useRoute } from "vue-router";
  import { ElMessage, ElMessageBox } from "element-plus";
  export default defineComponent({
    name: "",
    components: {
    },
    setup() {
      const store = useStore();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
      // const patrolBoatTypeFilters = computed(() => that.$util.formatTableHeadFilters(store.state.dictionary.pboatTypeList));
      // const shipUseFilters = computed (() => that.$util.formatTableHeadFilters(store.state.dictionary.pboatPurposeList));

      const state = reactive({
        //  加载中
        loading: false,
        //  查询条件展开状态
        expandValue: false,
        //  查询分页参数
        queryPage: {
          pageNum: 1,
          pageSize: 10
        },
        //  查询结果
        queryResult: {
          total: 0,
          tableData: []
        },
        //  查询表单参数
        queryForm: <any>{},
        //  查询表单参数备份
        back_queryForm: {},
        //  查询表格排序
        querySort: {},
        //  复合查询文本
        queryText: '',
        //  表格可选的情况下，绑定的数组
        selected: [],
        //  表格表头
        tableHead: [
          {value: "deptId", label: "所属单位1所属单位1所属单位1所属单位1所属单位1所属单位1所属单位1所属单位1所属单位1", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位2", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位3", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位4", show: true, fixed: 'left', sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位5", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位6", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位7", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位8", show: true, fixed: 'left', sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位9", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位10", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位11", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位12", show: true, sort: true, popover: true, width: 120},
          {value: "deptId", label: "所属单位13", show: true, sort: true, popover: true, width: 120},
          {
            label: '大分组',
            children: [
              {
                label: "分组1-4列",
                children: [
                  {value: "beidouTerminalNumber", label: "北斗编号", show: false, sort: true},
                  {value: "shipId", label: "船名号", show: true, popover: true},
                  // {value: "shipUse", label: "船舶用途", show: true, filters: shipUseFilters},
                ]
              },
              // {value: "patrolBoatType", label: "船舶类型", show: true, popover: true, filters: patrolBoatTypeFilters},
              {
                label: "分组2-2列",
                children: [
                  {value: "terminalStatus", label: "状态", show: true},
                  {value: "boatLong", label: "船长", show: false},
                ]
              },
            ]
          },
          {value: "createTime", label: "创建时间", show: true, sort: true, popover: true},
          {value: "crewNumber", label: "最大人数", show: true, popover: true},
          {value: "deep", label: "船深", show: false},
          {value: "manufacturer", label: "建造厂商", show: false},
          {value: "mmsi", label: "mmsi编号", show: false},
          {value: "patrolBoatType", label: "船舶类型", show: false},
          {value: "power", label: "航速", show: false},
          {value: "remark", label: "备注", show: true, popover: true},
          {
            label: "分组3-3列",
            children: [
              {value: "shipSource", label: "船舶来源", show: false},
              {value: "shipUse", label: "船舶用途", show: false},
              {value: "speekMax", label: "最大航速", show: false},
            ]
          },
          {value: "caozuo", label: "操作", show: true, fixed: 'right', width: 200},
        ],
        isFull: true
      });
      const ref_cusTable = ref()
      //  获取字典
      const initDictionary = () => {
        store.dispatch("app/LOAD_DEPT_TREE");
        store.dispatch("dictionary/LOAD_DICT_LIST", "pboat_type");
        store.dispatch("dictionary/LOAD_DICT_LIST", "pboat_purpose");
        store.dispatch("dictionary/LOAD_DICT_LIST", "pboat_source");
        store.dispatch("dictionary/LOAD_DICT_LIST", "boat_materials");
        store.dispatch("dictionary/LOAD_DICT_LIST", "equ_state");
        store.dispatch("dictionary/LOAD_DICT_LIST", "dev_duty_status");
      }
      //  查询分页参数改变处理方法
      const handlePage = ({page, pageSize}: any) => {
        state.queryPage.pageNum = page
        state.queryPage.pageSize = pageSize
        handleSearch(page, pageSize)
      }
      //  查询排序参数改变处理方法
      const handleSort = ({key, value}: any) => {
        state.querySort = key ? {key: value} : {}
        handleSearch()
      }
      //  复合查询文本改变处理方法
      const handleText = (text: string) => {
        state.queryText = text
        handleSearch()
      }
      //  表格内数据过滤参数处理，与表单参数同步
      const handleFilter = ({key, value}: any) => {
        console.log(key,value);
        state.queryForm[key] = value
        handleSearch()
      }
      //  重置查询表单方法
      const handleReset = () => {
        state.queryForm = {}
        state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
        handleSearch()
      }
      //  查询方法
      const handleSearch = (page = 1, pageSize = 10) => {
        //  添加分页参数
        const queryParams: any = {
          pageNum: page,
          pageSize: pageSize,
          sort: {},
          text: ''
        }
        //  添加排序参数
        for (const [k, v] of Object.entries(state.querySort)) {
          that.$util.isValue(v) ? (queryParams.sort[k] = v) : null;
        }
        //  添加表单参数
        for (const [k, v] of Object.entries(state.back_queryForm)) {
          that.$util.isValue(v) ? (queryParams[k] = v) : null;
        }
        //  添加复合查询参数
        queryParams.text = state.queryText
        state.loading = true
        that.$api.patrolBoatList(that.$util.formatGetParam(queryParams)).then((res: { code: number; rows: never[]; total: number; }) => {
          if (res.code === 200) {
            state.queryResult.tableData = res.rows
            state.queryResult.total = res.total
          }
          setTimeout(() => {
            state.loading = false
          }, 1000)
        }).catch(() => {
          setTimeout(() => {
            state.loading = false
          }, 1000)
        })
      }
      //  点击查询按钮后
      const onSearch = () => {
        ref_cusTable.value.resetFilter()
        state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
        state.queryPage.pageNum = 1
        handleSearch()
      }

      //  其他处理方法
      const deptLoad = computed(() => store.state.app.deptTreeMap.size > 0);

      const moreDelete = () => {
        console.log(state.selected)
      }

      //  树选择
      const getDept = (checkData: any, deptName: any) => {
        getDefaultKey(checkData.deptId, deptName);
      };
      //  树默认选择,请求表格数据
      const getDefaultKey = (deptId: string, deptName: string) => {
        state.queryForm.deptId = deptId;
        handleSearch();
      };
      onMounted(() => {
        state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
        initDictionary()
        handleSearch()
      })
      return {
        ref_cusTable,
        ...toRefs(state),
        handleSearch,
        handlePage,
        handleSort,
        handleReset,
        handleFilter,
        handleText,
        onSearch,
        deptLoad,
        moreDelete,
        getDept,
        getDefaultKey
      }
    },
  });
</script>
<style scoped lang="scss">
</style>
