<template>
  <div>
    <!-- 目标指标选择 -->
    <el-dialog v-model="props.targetShow" title="目标指标选择" width="1000px" :before-close="cancel">
      <!-- <div class="searchBox" ref="searchBox">
        <el-form :model="pageData.pageConfiger" class="mosty-from-wrap" :inline="true">
          <el-form-item label="目标/指标">
            <MOSTY.DictRidioAndSelect :dictData="props.dict.D_BZ_TARGET_ITEM_TYP" v-model="pageData.pageConfiger.typeId"
              selectType="select" @onChange="changeTypeId" />
          </el-form-item>
        </el-form>
      </div> -->
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <section :style="{ height: `calc(100% - 120px)` }">

        <el-table
          ref="multipleTableRef"
          :data="pageData.tableData"
          style="width: 100%"
          height="calc(100% - 1px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="名称" prop="targetName" width="330" />
          <el-table-column label="计算方式" width="330">
            <template #default="scope">
              <dict-tag :options="props.dict.D_BZ_TARGET_ITEM_JSFS" v-for="item in scope.row.targetValueType"
                        :key="item"
                        :value="item" :tag="false" />
            </template>
          </el-table-column>
          <el-table-column label="值">
            <template #default="scope">
              <dict-tag v-if="scope.row.targetValueType == '3'" :options="props.dict.D_BZ_SFDB"
                        :value="scope.row.targetValue"
                        :tag="false" />
              <span v-else>{{ scope.row.targetValue ? scope.row.targetValue : "--" }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!--        <MOSTY.Table :table-columns="pageData.tableColumn2" :tableData="pageData.tableData" :tableloading="tableloading"-->
        <!--                     :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">-->

        <!--          <template #targetValueType="{ row }">-->
        <!--            <dict-tag :options="props.dict.D_BZ_TARGET_ITEM_JSFS" v-for="item in row.targetValueType" :key="item"-->
        <!--                      :value="item" :tag="false" />-->
        <!--          </template>-->
        <!--          <template #targetValue="{ row }">-->
        <!--            <dict-tag v-if="row.targetValueType == '3'" :options="props.dict.D_BZ_SFDB" :value="row.targetValue"-->
        <!--                      :tag="false" />-->
        <!--            <span v-else>{{ row.targetValue ? row.targetValue : "&#45;&#45;" }}</span>-->
        <!--          </template>-->
        <!--          &lt;!&ndash; 操作 &ndash;&gt;-->
        <!--          <template #actions="{ row, $index }">-->
        <!--            <span class="operedit" @click="selectRow(row, $index)">-->
        <!--              <el-icon>-->
        <!--                <Edit />-->
        <!--              </el-icon>{{ row.select ? "已选择" : "选择" }}</span>-->
        <!--          </template>-->
        <!--        </MOSTY.Table>-->

      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="searchObj" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="obtainSelectionData">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ref, defineProps, defineEmits, reactive, watch, nextTick } from "vue"
import { postApi } from "@/api/tobAcco_api.js"
import { getItem } from "@/utils/storage"
import { filterqx } from "@/utils/auth.js"

const tableloading = ref(false)
const props = defineProps({
  checkIds:{
    type:Array,
    default:[]
  },
  targetShow: {
    type: Boolean,
    default: false
  },
  dict: Array,
  deptCode: String
})
const searchObj = reactive({
  checkIds:props.checkIds,
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  state:1,
  level:filterqx("isSgs") == "1" ? '01' : filterqx("isgs") == "1" ? '02' : '03'
})
let _multipleSelection = ref([])
const emits = defineEmits(["close", "change"])
const searchArr = reactive([
  {
    showType: "input",
    prop: "keywords",
    width: "250px",
    placeholder: "请输入关键字查询"
  }

])
let multipleSelection = ref([])
let multipleTableRef = ref(null)
const pageData = reactive({
  tableData: [],

  // 人员列表参数
  tableConfiger: {
    showIndex: false,
    loading: false
  },
  // 岗位列表table
  tableColumn2: [
    {
      title: "名称",
      prop: "targetName"
    },
    // {
    //   title: "目标/指标",
    //   prop: "typeId",
    //   showOverflowTooltip: false,
    //   showSolt: true,
    //   sortable: false
    // },
    {
      title: "计算方式",
      prop: "targetValueType",
      slot: true
    },
    {
      title: "值",
      prop: "targetValue",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ]
})
// 获取详情列表
watch(
  () => props.targetShow,
  (val) => {
    if (val) {
      getTableData()
    }
  }
)
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  if (val.length > 0) {
    _multipleSelection.value[searchObj.pageCurrent - 1] = val
  }
}
// 切换查询条件
const onSearch = ((obj) => {
  searchObj.keywords = obj.keywords
  searchObj.pageCurrent = 1
  getTableData()
})
const cancel = () => {
  emits("close", false)
}
// 获取列表数据
const getTableData = () => {
  tableloading.value = true
  searchObj.deptCode = props.deptCode
  postApi(searchObj, `/mosty-jcgl/target/getTargetList`).then((res) => {
    if (res.records) {
      res.records.forEach(el => {
        if (el.targetValueType === "2" && !el.targetValue.includes("%")) {
          el.targetValue = el.targetValue + "%"
        }
      })
      let item = _multipleSelection.value[searchObj.pageCurrent - 1]
      if (item) {
        for (let i = 0; i < item.length; i++) {
          for (let j = 0; j < res.records.length; j++) {
            if (item[i].id === res.records[j].id) {
              setTimeout(() => {
                nextTick(() => {
                  multipleTableRef.value.toggleRowSelection(res.records[j], true)
                })
              }, 500)
              break
            }
          }
        }
      }
      pageData.tableData = res.records
      tableloading.value = false
      searchObj.total = res.total
    } else {
      pageData.tableData = []
      tableloading.value = false
    }
  })
}

/**
 * 获取选中的数据列表
 */
const obtainSelectionData = (val) => {
  // let arrList = []
  // pageData.tableData.forEach((item) => {
  //   if (item.select) arrList.push(item)
  // })
  //

  emits("change", _multipleSelection.value.length ? _multipleSelection.value.flat() : [])
  _multipleSelection.value = []
}

// 选中
const selectRow = (row, index) => {
  pageData.tableData[index].select = !pageData.tableData[index].select
  // emits("change", row)
}
//分页
const changeNo = (val) => {
  searchObj.pageCurrent = val
  getTableData()
}
const changeSize = (val) => {
  searchObj.pageSize = val
  getTableData()
}
</script>
<style scoped>
::v-deep .el-dialog__body {
  overflow: auto !important;
  height: 70vh !important;
}
</style>
