<template>
  <div>
    <div class="control-measures-tb-top-btn">
      <!-- <MOSTY.Search :searchArr="searchArr" @submit="Searchdata" /> -->
      <el-button @click="addGkcs" v-if="showbtn != 'xq' && props.showAddBtn" style="margin-right: 10px;">新增</el-button>
    </div>
    <div>
      <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :isSelect="false" :isSort="false"
        :tableHeight="props.tableHeight">
        <!-- 风险管控等级 -->
        <!-- <template #dangerControlLevel="{ row }">
          <dict-tag :options="D_FXBS_GKCS_FXGKDJ" :value="row.dangerControlLevel" :tag="false"></dict-tag>
        </template> -->

        <!-- 风险动态监测情况 -->
        <!-- <template #dangerDynamicMonitorSituation="{ row }">
          <dict-tag :options="D_FXBS_GKCS_FXDTJCQK" :value="row.dangerDynamicMonitorSituation" :tag="false" />
        </template> -->

        <!-- 措施类型 -->
        <template #measuresType="{ row }">
          <dict-tag :options="D_FXBS_GKCS_AQCSLX" :value="row.measuresType" :tag="false"></dict-tag>
        </template>

        <!-- 措施内容 -->
        <template #measuresContent="{ row }">
          <dict-tag :options="D_FXBS_GKCS_AQCSLX" :value="row.measuresContent" :tag="false"></dict-tag>
        </template>

        <!-- 具体落实内容 -->
        <!-- <template #specificContent="{ row }">
          <span v-if="row.specificContent" :title="row.specificContent"
            style="display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            {{ row.specificContent }}
          </span>
          <span v-else>-</span>
        </template> -->

        <!-- 计划完成时间 -->
        <template #completeDatePlan="{ row }">
          <span>{{ row.completeDatePlan || '-' }}</span>
        </template>

        <template #actions="{ row, $index }">
          <span class="operedit" v-if="status != '03'" @click="handleEdit(row, $index)">
            <el-icon>
              <EditPen />
            </el-icon>
            编辑
          </span>
          <span class="operesee" @click="handleSee(row, $index)"><el-icon>
              <View />
            </el-icon>查看</span>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
            @confirm="handleDelete(row, $index)">
            <template #reference>
              <span class="operdel" size="small" v-if="status != '03'">
                <el-icon>
                  <Delete />
                </el-icon>
                删除</span>
            </template>
          </el-popconfirm>
        </template>
      </MOSTY.Table>
    </div>
    <div class="fenye">
      <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
    </div>
    <InnerDialog v-if="innerShow" :title="innerTitle" :innerShow="innerShow" @changeVi="changeVi"
      :dict="{ D_FXBS_GKCS_FXGKDJ, D_FXBS_GKCS_AQCSLX, D_FXBS_GKCS_SFBCYCS, }" :formValue="InnerForms"
      :editIndex="editIndex" :savebtnshow="savebtnshow" :planid="planid" @getList="innerDialogOk" />
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch, computed, reactive, getCurrentInstance, defineEmits } from 'vue'
import * as MOSTY from '@/components/MyComponents'
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
import InnerDialog from "../kzcsk/innerDialogSummary.vue"; // 公用的
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_FXBS_GKCS_FXGKDJ, D_FXBS_GKCS_AQCSLX, D_FXBS_GKCS_SFBCYCS, D_FXBS_GKCS_FXDTJCQK } = proxy.$dict("D_FXBS_GKCS_FXGKDJ", "D_FXBS_GKCS_AQCSLX", "D_FXBS_GKCS_SFBCYCS", "D_FXBS_GKCS_FXDTJCQK");
const props = defineProps({
  dangerid: String,
  isShowSaveBtn: {
    type: Boolean,
    default: true
  },
  tableHeight: {
    type: String,
    default: "296px"
  },
  chilrenlist: {
    type: Object,
    default: () => { }
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tjtype: {
    type: String,
    default: 'pj'
  },
  // 新增：是否显示新增按钮
  showAddBtn: {
    type: Boolean,
    default: true
  },
  planid: {
    type: String,
    default: ''

  },
})
const emits = defineEmits(["change"]);
const status = ref('')
const usernamelist = ref([])
const showbtn = ref('')
// 使用计算属性自动生成下拉框选项
const username = computed(() => {
  if (!usernamelist.value || usernamelist.value.length === 0) {
    return [];
  }
  return usernamelist.value.map(item => ({
    label: item.teamMemberUserName,
    value: item.teamMemberUserId
  }));
});
const searchArr = reactive([
  {
    showType: "select",
    prop: "evaluatorUserId",
    width: '250px',
    options: username,
    placeholder: '请选择评价小组人员'
  },
]);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});
const tableColumns = reactive([
  // {
  //   title: "风险管控等级",
  //   prop: "dangerControlLevel",
  //   slot: true
  // },
  // {
  //   title: "风险动态监测情况",
  //   prop: "dangerDynamicMonitorSituation",
  //   slot: true
  // },
  {
    title: "措施类型",
    prop: "measuresType",
    slot: true
  },
  {
    title: "措施内容",
    prop: "measuresContent",
    slot: true
  },
  // {
  //   title: "具体落实内容",
  //   prop: "specificContent",
  //   width: 200
  // },
  {
    title: "计划完成时间",
    prop: "completeDatePlan",
    width: 120
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true,
    width: 180
  }
])
/** 是否 [控制措施]编辑状态 */
const innerTitle = ref('')
/**当前编辑控制措施 索引 -1:新增 索引:编辑 */
const editIndex = ref(-1)
const InnerForms = ref({})
const innerShow = ref(false)
const tableData = ref([])
const savebtnshow = ref(true)


// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getkzcslist();
};
// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getkzcslist();
};
/** 获取控制措施列表 */
const getkzcslist = () => {
  getGkcsArr()
}
const getGkcsArr = async () => {
  let params = {
    ...listQuery.value,
    planId: props.planid,
    identifyResultId: InnerForms.value.identifyResultId
  }
  const res = await getApi(params, `/mosty-jcgl/tbDangerIdentifyControlMeasures/selectPage`)
  tableData.value = res.records
  listQuery.value.total = res.total
}
/***新增-管控措施 */
const addGkcs = () => {
  editIndex.value = -1;
  savebtnshow.value = true
  innerTitle.value = '新增管控措施'
  Object.assign(InnerForms.value, {
    id: '',//主键id
    dangerControlLevel: '',//风险管控等级
    dangerDynamicMonitorSituation: '',//风险动态监测情况
    measuresType: '',//措施类型
    measuresContent: '',//措施内容
    completeDatePlan: '',//计划完成时间
    identifyResultId: props.chilrenlist.bmbsid || '' 
  })
  innerShow.value = true; // 显示弹窗
}
const handleEdit = (row, index) => {
  editIndex.value = index;
  InnerForms.value = {
    ...row,
  }
  innerTitle.value = '编辑管控措施'
  savebtnshow.value = true
  innerShow.value = true; // 显示弹窗
}
const handleSee = (row, index) => {
  editIndex.value = index;
  InnerForms.value = {
    ...row,
  }
  innerTitle.value = '查看管控措施'
  savebtnshow.value = false
  innerShow.value = true;
}
const handleDelete = async (row) => {
  try {
    let id
    const res = await deleteApi({}, `/mosty-jcgl/tbDangerIdentifyControlMeasures/${id = row.id}`)
    if (res) {
      getkzcslist()
      ElMessage.success('删除成功')
    }
  } catch (error) {
    ElMessage.error('删除失败，请重试')
  }

  // emits('change', arr)
}
/**弹窗 状态改变*/
const changeVi = (val) => {
  innerShow.value = val;
};
/**编辑排查项回调弹窗
 * @param { Boolean } val 是否显示
 * @param { Object } formVal 弹窗返回的表单数据
 */
const innerDialogOk = (form1, formVal) => {
  innerShow.value = false;
  getkzcslist()
};
const getTableData = () => {
  return tableData.value.map(item => {
    return { ...item }
  })
};

watch(() => props.dangerid, (val) => {
  if (!val) {
    tableData.value = []
    const arr = getTableData()
    emits('change', arr)
  } else {
    // getkzcslist()
  }
})
watch(() => props.chilrenlist, (val) => {
  if (val && props.planid) {
    InnerForms.value = {
      ...val,
      identifyResultId: props.chilrenlist.bmbsid || ''
    }
    status.value = val.status
    getkzcslist()
  }
})
watch(() => props.tableData, (val) => {
  if (val) {
    usernamelist.value = val
  }

}, {
  immediate: true
})
watch(() => props.tjtype, (val) => {
  if (val) {
    showbtn.value = val
  }
}, {
  immediate: true
})

</script>

<style scoped lang="scss">
.control-measures-tb-top-btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>
