<script setup>
import { Search } from "@element-plus/icons-vue";
import { reactive, watch } from "vue"
import { videoInterface } from '@/api/api.js'
import { ElMessage } from "element-plus";


const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['cancel', 'reportChange'])

const pageState = reactive({
  ReportId: '',
  searchTitle: '',
  searchType: '',
  reportTypeList: [],
  reportList: []
})

watch(
  () => props.isShow,
  (val) => {
    if (val) {
      pageState.ReportId = ''
      pageState.searchTitle = ''
      pageState.searchType = ''
      getTableData()
      getClassify()
    }
  }
)

function cancelHandle() {
  emits('cancel')
}

function getTableData() {
  videoInterface.getReportList({
    ClassifyIdSecond: pageState.searchType[pageState.searchType.length - 1],
    Keyword: pageState.searchTitle
  }).then(res => {
    if (res.Ret !== 200) return
    pageState.reportList = res.Data
  })
}

function getClassify() {
  videoInterface.getReportType().then(res => {
    if (res.Ret !== 200) return
    pageState.reportTypeList = res.Data || []
  })
}
function handleChange() {
  getTableData()
}

function handleInput() { getTableData() }
function saveHandle() {
  //检查该报告是否已关联视频
  const item = pageState.reportList.find(i => i.ReportId == pageState.ReportId)
  if (item.BindVideo) {
    ElMessage.error(`该报告已关联${item.BindVideoTitle}，请重新选择`)
    return
  }
  emits('reportChange', item)
}

</script>

<template>
  <el-dialog
    :model-value="props.isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    title="关联报告"
    @close="cancelHandle"
    custom-class="connetive-report-dialog"
    center
    width="896px"
  >
    <div class="dialog-container">
      <div class="search-box">
        <!-- <el-select placeholder="请选择报告类型" v-model="searchType" clearable  @change="handleChange">
            <el-option v-for="item in reportTypeList" :key="item.Id"
              :value="item.Id" :label="item.ClassifyName"
            ></el-option>
          </el-select> -->
        <el-cascader
          placeholder="请选择报告类型"
          v-model="pageState.searchType"
          :options="pageState.reportTypeList"
          :props="{
            expandTrigger: 'hover',
            children: 'Child',
            label: 'ClassifyName',
            value: 'Id',
          }"
          @change="handleChange"
        ></el-cascader>
        <el-input
          placeholder="标题关键字搜索"
          :prefix-icon="Search"
          v-model="pageState.searchTitle"
          @input="handleInput"
        />
      </div>
      <div class="table-box">
        <el-table :data="pageState.reportList" border style="margin-top: 20px">
          <el-table-column align="center" label="报告标题">
            <template #default="{ row }">
              <div style="text-align: left">
                <el-radio v-model="pageState.ReportId" :label="row.ReportId">
                  <span style="white-space: normal">{{ row.Title }}</span>
                </el-radio>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布时间">
            <template #default="scope">
              {{ scope.row.PublishTime }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="foot-container">
        <el-button type="primary" @click="saveHandle">保 存</el-button>
        <el-button @click="cancelHandle">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.connetive-report-dialog {
  .dialog-container {
    .search-box {
      .el-cascader .el-input {
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.connetive-report-dialog {
  .dialog-container {
    .search-box {
      display: flex;
      justify-content: space-between;
      .el-input {
        width: 400px;
      }
    }
  }
}
</style>
