<template>
  <Dialog
    title="政府监管工程详情"
    :visible="dialogVisible"
    width="80%"
    @change-visible="changeVisible"
    :destroy-on-close="true"
  >
    <div class="project-name">
      <div>
        <img src="@/assets/images/index/project.png" alt="" />
        {{ data.project_name }}
      </div>
      <div>
        政府监管得分：<span class="count">{{ data.regulation_score }}</span>
      </div>
    </div>
    <el-form inline :model="searchForm" class="search-form">
      <el-form-item label="记录时间：">
        <div class="select-time-div">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
            @change="changeTime"
            class="select-time"
          />
        </div>
      </el-form-item>
      <!-- <el-form-item label="问题类型：">
        <el-input size="small" v-model="searchForm.category_name" placeholder="请输入"></el-input>
      </el-form-item> -->
      <el-form-item label="问题种类：">
        <el-select
          style="width: 1rem"
          v-model="searchForm.question_type"
          size="small"
          clearable
        >
          <el-option
            v-for="option in question_type"
            :label="option.value"
            :value="option.key"
            :key="option.key"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="问题等级：">
        <el-select
          style="width: 1rem"
          v-model="searchForm.question_level"
          size="small"
          clearable
        >
          <el-option
            v-for="option in question_level"
            :label="option.value"
            :value="option.key"
            :key="option.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="处理状态：">
        <el-select
          style="width: 1rem"
          v-model="searchForm.question_status"
          size="small"
          clearable
        >
          <el-option
            v-for="option in question_status"
            :label="option.value"
            :value="option.key"
            :key="option.key"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="handleSearch" size="small"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <DialogApiDataTable
      :has-index="true"
      ref="table"
      :columns="columns"
      :parameters="searchForm"
      :api="api"
      :auto-load="false"
      @row-click="showQuestionDetail"
    >
      <template #question_level_str="{ data }">
        <span
          :style="{
            color: data.question_level == 1 ? '#E27F37' : '#DF3333',
          }"
        >
          {{ data.question_level_str }}
        </span>
      </template>
      <template #question_status_str="{ data }">
        <span
          :style="{
            color: data.question_status == 1 ? '#DF3333' : '#30B34F',
          }"
        >
          {{ data.question_status_str }}
        </span>
      </template>
    </DialogApiDataTable>

    <QuestionDetail
      :question-id="questionId"
      :visible="questionVisible"
      @change-visible="(val) => (questionVisible = val)"
    >
    </QuestionDetail>
  </Dialog>
</template>
<script>
import { getZFJGConfig, getZFJGQuestionList } from "@/api/dataStatis";
import QuestionDetail from "./QuestionDetail.vue";
export default {
  name: "ZFJGDetail",
  components: { QuestionDetail },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchForm: {},
      dateRange: [],
      api: getZFJGQuestionList,
      columns: [
        {
          label: "标段",
          prop: "lot_project_name",
          minWidth: "300px",
          align: "left",
          showOverflowTooltip: true
        },
        {
          label: "机构名称",
          prop: "c_company_name",
          minWidth: "200px",
          align: "left",
          showOverflowTooltip: true
        },
        {
          label: "单位名称",
          prop: "units_company_name",
          minWidth: "200px",
          align: "left",
          showOverflowTooltip: true
        },
        {
          label: "单位类型",
          prop: "utype_str",
          minWidth: "100px",
        },
        // {
        //   label: "问题类型",
        //   prop: "name",
        //   minWidth: "120px",
        // },
        {
          label: "问题种类",
          prop: "question_type_str",
          minWidth: "100px",
        },
        {
          label: "用户问题描述",
          prop: "user_question",
          minWidth: "300px",
          align: "left",
          showOverflowTooltip: true
        },
        {
          label: "记录时间",
          prop: "create_time",
          minWidth: "150px",
        },
        {
          label: "问题等级",
          prop: "question_level_str",
          hasSlot: true,
          minWidth: "100px",
        },
        // {
        //   label: "处理状态",
        //   prop: "question_status_str",
        //   minWidth: "100px",
        //   hasSlot: true,
        // },
      ],
      question_level: [],
      question_status: [],
      question_type: [],
      questionVisible: false,
      questionId: "",
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("change-visible", val);
      },
    },
  },
  methods: {
    changeVisible(val) {
      this.dialogVisible = val;
    },
    changeTime(tr) {
      this.searchForm.start_time = tr[0] ? tr[0] + " 00:00:00" : "";
      this.searchForm.end_time = tr[1] ? tr[1] + " 00:00:00" : "";
    },
    handleSearch() {
      this.$refs.table.getData();
    },
    showQuestionDetail(row) {
      this.questionId = row.id;
      this.questionVisible = true;
    },
  },
  mounted() {
    getZFJGConfig().then((res) => {
      for (let i in res.data.question_level) {
        this.question_level.push({
          key: i,
          value: res.data.question_level[i],
        });
      }
      for (let i in res.data.question_status) {
        this.question_status.push({
          key: i,
          value: res.data.question_status[i],
        });
      }
      for (let i in res.data.question_type) {
        this.question_type.push({
          key: i,
          value: res.data.question_type[i],
        });
      }
    });
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.searchForm = {
          project_id: this.data.id,
        };
        this.dateRange = [];
        this.$nextTick(() => {
          this.handleSearch();
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.project-name {
  line-height: 50px;
  padding: 0 10px;
  background: #12407f;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #60fff6;
  font-size: 14px;
  .count {
    font-size: 20px;
    font-weight: bold;
    vertical-align: top;
  }
  img {
    width: 20px;
    vertical-align: top;
    margin: 15px 10px;
  }
}
::v-deep .el-dialog__wrapper :v-deep.el-dialog .el-dialog__body {
  height: 800px !important;
  min-height: 800px !important;
}
.search-form .el-date-editor.el-input__inner{
  background: #072350 !important;
  height: 32px;
}
.select-time-div{
  height: 40px;
  display: flex;
  align-items: center;
  ::v-deep .el-date-editor .el-range__icon{
    line-height: 28px;
  }
  ::v-deep .el-date-editor .el-range-separator{
    line-height: 28px;
  }
}
</style>