<template>
  <div>
    <!-- 表格 -->
    <div class="box-a">
      <div class="leftbox">
        <el-form class="mosty-from-wrap" title="我的评价" ref="elform" label-width="130px" :model="proms" :inline="true"
          :rules="rules" :disabled='props.tjtype == "xq"' style="height: calc(100vh - 571px);overflow-y:scroll"
          :auto-reset="false">
          <el-form-item label="风险描述:" prop="dangerDescription" style="width: 100%">
            <el-input v-model="proms.dangerDescription" type="textarea" :rows="3" show-word-limit maxlength="300" />
          </el-form-item>
          <el-form-item label="风险类型:" prop="type" style="width: 45%">
            <el-select v-model="proms.type" style="width: 100%">
              <el-option v-for="item in D_BZ_FXLX" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查频率:" prop="jcpl" style="width: 45%" v-if='obj'>
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_JCBZPL" v-model="proms.jcpl" style="width: 100%"
              selectType="select" placeholder='请选择检查频率' />
          </el-form-item>
          <el-form-item label="可能产生的后果:" prop="consequense" style="width: 100%">
            <el-select v-model="proms.consequense" style="width: 100%" multiple>
              <el-option v-for="item in D_TB_KNCSDHG" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="控制措施:" prop="controls" style="width: 100%">
            <el-select v-model="proms.controls" multiple style="width: 755px">
              <el-option v-for="item in D_TB_WXYKZCS" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item v-if="proms.pjfs == '01'" label="L:" prop="pjlPoint" style="width: 100%">
            <el-select v-model="proms.pjlPoint" style="width: 100%">
              <el-option v-for="item in D_TB_LECD_L" :key="item.value" :label="item.label" :value="item.value"
                @click.native="labelClick(item.value, 0)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="proms.pjfs == '01'" label="E:" prop="pjePoint" style="width: 100%">
            <el-select v-model="proms.pjePoint" style="width: 100%">
              <el-option v-for="item in D_TB_LECD_E" :key="item" :label="item.label" :value="item.value"
                @click.native="labelClick(item.value, 1)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="proms.pjfs == '01'" label="C:" prop="pjcPoint" style="width: 100%">
            <el-select v-model="proms.pjcPoint" style="width: 100%">
              <el-option v-for="item in D_TB_LECD_C" :key="item" :label="item.label" :value="item.value"
                @click.native="labelClick(item.value, 2)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="proms.pjfs == '01'" label="D:" prop="pjdPoint" style="width: 45%">
            <el-input v-model="proms.pjdPoint" readonly style="width: 100%" />
          </el-form-item>
          <el-form-item v-if="proms.pjfs == '02'" label="L:" prop="pjlPoint" style="width: 100%">
            <el-select v-model="proms.pjlPoint" style="width: 100%">
              <el-option v-for="item in D_BZ_LSR_L" :key="item.value" :label="item.label" :value="item.value"
                @click.native="labelClick(item.value, 0)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="proms.pjfs == '02'" label="S:" prop="pjePoint" style="width: 100%">
            <el-select v-model="proms.pjePoint" style="width: 100%">
              <el-option v-for="item in D_BZ_LSR_S" :key="item" :label="item.label" :value="item.value"
                @click.native="labelClick(item.value, 1)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="proms.pjfs == '02'" label="R:" prop="pjdPoint" style="width: 45%">
            <el-input v-model="proms.pjdPoint" readonly style="width: 100%" />
          </el-form-item>
          <el-form-item label="风险等级:" style="width: 45%">
            <span v-if="proms.risklevel == '4'" class="fxdjspan reds">重大风险</span>
            <span v-if="proms.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
            <span v-if="proms.risklevel == '2'" class="fxdjspan blus">一般风险</span>
            <span v-if="proms.risklevel == '1'" class="fxdjspan gres">低风险</span>
          </el-form-item>

        </el-form>
      </div>
      <div class="tabBox2 zxpj-index">
        <div style="display: flex;justify-content:space-between;margin: 10px;">
          <div style="color:red;">评价小组评价结果</div>
          <!-- v-loading='loading' -->
          <div class='btnBoxs'>
            <el-button type="primary" @click="saveFrom(elform)" v-if='props.tjtype != "xq"'>
              <span>保存</span>
            </el-button>
            <el-button type="primary" @click="Close">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              <span>关闭弹窗</span>
            </el-button>
          </div>
        </div>
        <div style="height: calc(100vh - 600px);">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloadings"
            :isSelect="false" :isSort="false" style="width: 100%;">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" />
            </template>
            <template #consequense="{ row }">
              <dict-tag :options="D_TB_KNCSDHG" :value="row.consequense" :tag="true" />
            </template>
            <template #pjdPoint="{ row }">
              <span>{{ row.pjdPoint ? row.pjdPoint : '--' }}</span>
            </template>
            <template #actions="{ row }">
              <span v-if="row.risklevel == '-'">待评价</span>
              <span v-else-if='props.tjtype != "xq" && row.risklevel != "-"' class="operesee" @click="handlehz(row)">
                <el-icon>
                  <Compass />
                </el-icon>应用</span>
              <span v-else>--</span>
            </template>
          </MOSTY.Table>
        </div>
      </div>
    </div>
    <div style='display:flex;justify-content:space-between;margin-right:20px;'>
      <span style='color:black;font-size:20px;margin-left:10px;'>管控措施:</span>
      <el-button type="primary" @click="toAdd('add', null)" v-if='props.tjtype != "xq"'>
        <span>新增</span>
      </el-button>
    </div>
    <!--   -->
    <div style="height: calc(100vh - 552px);margin:0 10px;">
      <MOSTY.Table :table-columns="tableColumns" :tableData="tableData2" :isSelect="false" :isSort="false"
        :tableHeight="'100%'">
        <template #yhLv="{ row }">
          <dict-tag :options="D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
        </template>
        <template #yhFlag="{ row }">
          <dict-tag :options="NYHBZ" :value="row.yhFlag" :tag="false"></dict-tag>
        </template>
        <template #isPic="{ row }">
          <dict-tag :options="NSFBXSCTP" :value="row.isPic" :tag="false"></dict-tag>
        </template>
        <template #actions="scope">
          <span class="operedit" v-if='props.tjtype != "xq"' @click="toAdd('exit', scope.row, scope.$index)"><el-icon>
              <EditPen />
            </el-icon>修改</span>
          <el-popconfirm v-if='props.tjtype != "xq"' confirm-button-text="是" cancel-button-text="否" icon-color="red"
            title="确定要删除?" @confirm="handledelete(scope.row, scope.$index)">
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <Delete />
                </el-icon>
                删除</span>
            </template>
          </el-popconfirm>
          <span class="operesee" @click="toAdd('see', scope.row, scope.$index)"><el-icon>
              <View />
            </el-icon>查看</span>
        </template>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </div>
    <InnerDialog v-if="innerShow" :title="title" :innerShow="innerShow" @changeVi="changeVi" :savebtnshow='savebtnshow'
      :dict="{ D_DBZ_YHDJ, NSFBXSCTP, NYHBZ }" :formValue="data.editObj" :type='"pjpage"' @getList="getListEvent" />
  </div>
</template>
<script setup>
// 引入
import { defineProps, onMounted, getCurrentInstance, defineEmits, ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { isString } from '@/utils/tools.js';
import * as MOSTY from "@/components/MyComponents/index";
import InnerDialog from '../kzcsk/innerDialog.vue';
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();
const { D_TB_KNCSDHG, D_BZ_JCBZPL, D_TB_LECD_L, D_TB_LECD_E, D_TB_LECD_C,
  D_BZ_FXLX, D_BZ_LSR_S, D_BZ_LSR_L, D_DBZ_YHDJ, NYHBZ, NSFBXSCTP

} = proxy.$dict("D_TB_KNCSDHG", "D_BZ_JCBZPL", "D_TB_LECD_L", "D_TB_LECD_E", 'D_TB_LECD_C', 'D_BZ_FXLX',
  "D_BZ_LSR_S", "D_BZ_LSR_L", "D_DBZ_YHDJ", "NYHBZ", "NSFBXSCTP");
const elform = ref();
const peoplelistid = ref(null);
const rules = reactive({
  consequense: [{ required: true, message: "请选择可能产生的后果", trigger: "blur" }],
  // controls: [{ required: true, message: "请选择控制措施", trigger: "blur" }],
  pjlPoint: [{ required: true, message: "请选择", trigger: "blur" }],
  pjePoint: [{ required: true, message: "请选择", trigger: "blur" }],
  pjcPoint: [{ required: true, message: "请选择", trigger: "blur" }],
  pjdPoint: [{ required: true, message: "请选择", trigger: "blur" }],
  jcpl: [{ required: true, message: "检查频率不能为空", trigger: "blur" }],
  type: [{ required: true, message: "请选择", trigger: "blur" }],
  dangerDescription: [{ required: true, message: "请输入风险描述", trigger: "blur" }],
});
const loading = ref(false);
const obj = ref(null);
const editIndex = ref(null)
const savebtnshow = ref(true)
const fromData = ref({})
const proms = ref({})
const plan = ref({});
const title = ref('')
const data = reactive({
  editObj: {},
});
const innerShow = ref(false)
const dangerDescription = ref('');
const lecarr = ref([])
const tableData = ref([])
const tableloadings = ref(false)
const addyyShow = ref(false)
const entity = ref({})
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  idlist: {
    type: Object,
    default: {}

  },
  tjtype: {
    type: String,
    default: 'pj'
  },
  userId: String

});
const tableData2 = ref([])
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});
const tableColumns = reactive([
  {
    title: "管控措施内容",
    prop: "itemName"
  },
  {
    title: "隐患等级",
    prop: "yhLv",
    slot: true
  },
  {
    title: "隐患说明",
    prop: "yhNote",

  },
  {
    title: "标红项",
    prop: "yhFlag",
    slot: true
  },
  {
    title: "是否必须上传图片",
    prop: "isPic",
    slot: true
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const tableColumn = ref([
  {
    title: "小组成员",
    prop: "userName",
    sortable: true
  },
  {
    title: "风险类型",
    prop: "type",
    slot: true,
    sortable: true
  },
  {
    title: "后果",
    prop: "consequense",
    sortable: true,
    slot: true
  },
  // {
  //   title: "措施",
  //   prop: "controls",
  //   sortable: true,
  //   slot: true
  // },
  {
    title: "L-E-C-D",
    prop: "pjdPoint",
    sortable: true,
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
onMounted(() => {
  listQuery.value.bmbsid = proms.value.id ? proms.value.id : props.idlist.rybsid,
    getfrom();
  getkzcslist()

})

function labelClick(val, lab) {
  lecarr.value[lab] = val
  if (proms.value.pjfs == '01') {
    if (lecarr.value[0] && lecarr.value[1] && lecarr.value[2]) {
      proms.value.pjdPoint = (parseFloat(lecarr.value[0]) * parseFloat(lecarr.value[1]) * parseFloat(lecarr.value[2]) * 1000000).toFixed(2);
      if (proms.value.pjdPoint >= 320) {
        proms.value.risklevel = '4'
      } else if (proms.value.pjdPoint >= 160) {
        proms.value.risklevel = '3'
      } else if (proms.value.pjdPoint >= 70) {
        proms.value.risklevel = '2'
      } else {
        proms.value.risklevel = '1'
      }
    }

  } else {
    if (lecarr.value[0] && lecarr.value[1]) {
      proms.value.pjdPoint = ((parseFloat(lecarr.value[0]) / 4) * (parseFloat(lecarr.value[1]) / 4)).toFixed(2);
      if (proms.value.pjdPoint >= 16) {
        proms.value.risklevel = '4'
      } else if (proms.value.pjdPoint >= 9) {
        proms.value.risklevel = '3'
      } else if (proms.value.pjdPoint >= 4) {
        proms.value.risklevel = '2'
      } else {
        proms.value.risklevel = '1'
      }
    }

  }


}

//辨识评价-评价-页面详情
function getfrom() {
  getApi({ rybsid: props.idlist.rybsid }, '/mosty-jcgl/identifyUser/showInfo').then((res) => {
    if (res) {
      if (res.plan.pjfs == '01') {
        tableColumn.value[3].title = 'L-E-C-D'
      } else {
        tableColumn.value[3].title = 'L-S-R'
      }
      obj.value = res.obj
      entity.value = res.entity
      plan.value = res.plan
      fromData.value.shortid = res.rybs.shortid;
      fromData.value.sitename = res.rybs.sitename;
      dangerDescription.value = res.rybs.dangerDescription
      // res.rybs.controls = res.rybs.controls.split(',')
      proms.value = res.rybs
      proms.value.consequense = res.rybs.consequense.split(",")
      proms.value.pjfs = res.plan.pjfs
      lecarr.value[0] = res.rybs.pjlPoint;
      lecarr.value[1] = res.rybs.pjePoint;
      lecarr.value[2] = res.rybs.pjcPoint;
      proms.value.pjdPoint = proms.value.pjdPoint ? proms.value.pjdPoint.toString() : null
      proms.value.pjlPoint = proms.value.pjlPoint ? proms.value.pjlPoint.toString() : null
      proms.value.pjePoint = proms.value.pjePoint ? proms.value.pjePoint.toString() : null
      proms.value.pjcPoint = proms.value.pjcPoint ? proms.value.pjcPoint.toString() : null
      proms.value.jcpl = res.obj && res.obj.checkrate && res.obj.checkrate != 'none' ? res.obj.checkrate + '_' + res.obj.checkratecount : null
      getpepoList()
    } else {
      getpepoList()
      proms.value = JSON.parse(JSON.stringify(tableData.value[0]));
      peoplelistid.value = tableData.value[0].id
    }

  })
}
//	辨识评价-评价-查询评价小组情况
function getpepoList() {
  let data = {
    rybsid: proms.value.id ? proms.value.id : props.idlist.rybsid,
  }
  getApi(data, '/mosty-jcgl/identifyUser/showPjxzList').then((res) => {

    tableData.value = res
    tableData.value.forEach((item) => {
      try {
        item.consequense = item.consequense.split(",")
      } catch (error) {
      }
    })
  })
}
//应用
function handlehz(row) {
  proms.value = JSON.parse(JSON.stringify(row));
  proms.value.dangerDescription = dangerDescription.value
  proms.value.pjfs = plan.value.pjfs
  proms.value.risklevel = row.risklevel
  proms.value.pjlPoint = row.pjlPoint ? row.pjlPoint.toString() : null
  proms.value.pjePoint = row.pjePoint ? row.pjePoint.toString() : null
  proms.value.pjcPoint = row.pjcPoint ? row.pjcPoint.toString() : null
  proms.value.pjdPoint = row.pjdPoint ? row.pjdPoint.toString() : null
  proms.value.jcpl = obj.value && obj.value.checkrate && obj.value.checkrate != 'none' ? obj.value.checkrate + '_' + obj.value.checkratecount : null
  peoplelistid.value = row.id
}
//获取控制措施
function getkzcslist() {
  getApi(listQuery.value, '/mosty-jcgl/dangerPlanlist/getControlsList').then(res => {
    tableData2.value = res.records
    listQuery.value.total = res.total
  })
}
//新增控制措施
function toAdd(type, row, index) {
  if (type == 'add') {
    data.editObj = {}
    editIndex.value = null;
    title.value = '控制措施新增'
    savebtnshow.value = true
  } else if (type == 'exit') {
    data.editObj = row
    editIndex.value = index;
    title.value = '控制措施修改'
    savebtnshow.value = true
  } else {
    data.editObj = row
    editIndex.value = index;
    title.value = '控制措施详情'
    savebtnshow.value = false
  }
  innerShow.value = true
}
function getListEvent(val) {
  if (editIndex.value != null) {
    for (let i = 0; i < tableData2.length; i++) {
      if (editIndex.value == i) {
        tableData2[i] = val
      }
    }
    // tableData2.value.forEach((item, index) => {
    //   if (editIndex.value == index) {
    //     tableData2.value.splice(index, 1, val);
    //   }
    // });
  } else {
    tableData2.value.push(val);
  }
}
//删除控制措施
function handledelete(index) {
  tableData2.value.splice(index, 1);
}
//关闭控制措施弹窗
function changeVi() {
  innerShow.value = false
}
//保存
const saveFrom = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      tableData2.value.forEach(item => {
        item.bmbsid = props.idlist.rybsid
      })
      let data = {
        deplistId: props.idlist.rybsid,
        consequense: proms.value.consequense ? proms.value.consequense.toString() : '',
        checkrate: proms.value.jcpl ? proms.value.jcpl.split('_')[0] : null,
        checkratecount: proms.value.jcpl ? proms.value.jcpl.split('_')[1] : null,
        // controls: proms.value.controls ? proms.value.controls.toString() : '',
        dangerDescription: proms.value.dangerDescription,
        entityId: props.idlist.identifyEntityId,
        id: proms.value.id ? proms.value.id : peoplelistid.value,
        pjcPoint: proms.value.pjcPoint,
        pjdPoint: proms.value.pjdPoint,
        pjePoint: proms.value.pjePoint,
        pjlPoint: proms.value.pjlPoint,
        risklevel: proms.value.risklevel,
        type: proms.value.type,
        resultList: tableData2.value
      }

      if (props.tjtype == 'sy') {
        //审验
        postApi(data, `/mosty-jcgl/identifyUser/saveSy`).then(res => {
          ElMessage.success("审验成功");
          emits("close", props.userId);
        }).finally(() => {
          loading.value.false
          // proms.value.controls = proms.value.controls&&isString(proms.value.controls) ? proms.value.controls.split(',') : null
          proms.value.consequense = proms.value.consequense && isString(proms.value.consequense) ? proms.value.consequense.split(',') : proms.value.consequense
        })
      } else {
        postApi(data, '/mosty-jcgl/identifyUser/savePj').then(res => {
          ElMessage.success("保存成功");
          emits("close", props.userId);
        }).finally(() => {
          loading.value.false
          // proms.value.controls = proms.value.controls&&isString(proms.value.controls) ? proms.value.controls.split(',') : null
          proms.value.consequense = proms.value.consequense && isString(proms.value.consequense) ? proms.value.consequense.split(',') : proms.value.consequense
        })
      }
    } else {

      ElMessage.error("请输入必填项!");
    }
  })

}

// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getkzcslist();
};
// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getkzcslist();
};
//返回
function Close() {
  if (props.tjtype != "xq") {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("close", props.userId);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("close", props.userId);
  }

}
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.el-form-item {
  margin-bottom: 10px !important;
}

.box-a {
  display: flex;
  justify-content: space-between;
}

.el-select {
  width: 150px;
}

.btnBox {
  position: absolute;
  right: 15px;
  top: 9px;
}

.bs-title {
  color: red;
  margin: 10px;
}

.leftbox {
  width: 45%;
  margin-right: 40px;
  margin-top: 20px;
}

.tabBox2 {
  width: 55%;
}

.fil-bbox {
  display: flex;

  .font {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin: 10px;

    .labs {
      color: #999494;
    }
  }
}

.operates {
  cursor: pointer;
  color: yellowgreen !important;
  display: inline-block;
  width: 40px;
  height: 23px;
  border: 1px solid #000;
  margin: 0 5px;
  background-color: #fff;
}

.operated {
  cursor: pointer;
  color: #fff !important;
  display: inline-block;
  width: 40px;
  height: 23px;
  border: 1px solid #000;
  margin: 0 5px;
  background-color: #f11515;
}

.redfont {
  color: rgb(245, 34, 34) !important;
}

.fxdjspan {
  display: inline-block;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  border-radius: 5px;
  color: #fff !important;
}

.reds {
  background-color: #e80000;
}

.orgs {
  background-color: #ff8040;
}

.blus {
  background-color: #e2d101;
}

.gres {
  background-color: #0080ff;
}
</style>
