<script>
import { defineComponent, ref, getCurrentInstance, reactive } from "@vue/composition-api";
import request from '~/utils/request';
import { Message } from 'element-ui'
import RemoteSelect from '~/components/RemoteSelect/index.vue';
import { omit } from 'lodash-es';

export default defineComponent({
  props: [],
  components: { RemoteSelect },
  setup(props) {
    const _this = getCurrentInstance().proxy;
    // #region (constant)
    const TABLE_KEY = 'jxjd_id'
    const URL_CUT = '/jdbg/xxgzjc_jcbd'
    const URL_CUT_REF = ref(URL_CUT)
    const URL_SUBMIT_KEY = URL_CUT.split('/').join('_').slice(1)
    const instance = getCurrentInstance().proxy
    // #endregion

    // #region (variable)
    const loading_table = ref(true)
    // 'add' | 'edit'
    let whichDialogSubmit
    // #endregion

    // #region (type)
    // type TYPE_TABLE_FIELD = {
    //   [TABLE_KEY]: string;
    //
    //   'jxjd_name': string; // 检查任务名称
    //
    //   'jxj_id': string; // 检查任务编号
    //
    //   'jxjd_sm_name': string; // 学校名称
    //
    //   'jxjd_sm_id': string; // 学校编号
    //
    //   'jxjd_jczcy': string; // 检查组成员
    //
    //   'jxjd_jczcy_json': string; // 检查组成员JSON
    //
    //   'jxjd_jczyj': string; // 检查组意见
    //
    //   'jxj_xxknjwt': string; // 学校困难及问题
    //
    // }
    // #endregion

    // #region (query row)
    const queryForm_Data = ref({})

    const handleQueryFormBtn_search = () => {
      queryApi()
    }
    // #endregion

    // #region (table selection)
    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
      multipleSelection.value = val
    }
    // #endregion

    // #region (table row)
    const handleTableRowBtn_add = () => {
      whichDialogSubmit = 'add'
      dialogForm_Data.value = {}
      dialogVisible_addOrEdit.value = true
    }
    const handleTableRowBtn_delete = async () => {
      await deleteApi(multipleSelection.value.map((item) => item[TABLE_KEY]))
      queryApi()
    }
    // #endregion

    // #region (table body)
    const tableData = ref([])
    const DetailName = 'XXGZJC_JCBD_DETAIL'
    const DetailParam = 'id'

    const handleTableColBtn_edit = async (scope) => {
      whichDialogSubmit = 'edit'
      const res = await detailApi(scope.row[TABLE_KEY])
      dialogForm_Data.value = (res.data.one_info)
      dialogVisible_addOrEdit.value = true
    }
    const handleTableColBtn_detail = (scope) => {
      instance.$router.push({ name: DetailName, params: { [DetailParam]: scope.row[TABLE_KEY] } })
    }
    const handleTableColBtn_delete = async (scope) => {
      await deleteApi(scope.row[TABLE_KEY])
      queryApi()
    }
    // #endregion

    // #region (pagination)
    const total = ref(0)
    const limit = ref(10)

    const currentPage = ref(1)
    function handleCurrentChange() {
      queryApi()
    }
    // #endregion

    // #region (dialog base)
    const dialogForm_Data = ref({})

    const handleDialogFormBtn_submit = async (formRefKey, extendData) => {
      const isValid = await (instance?.$refs[formRefKey]).validate()
      if (isValid) {
        const [jxjd_sm_id, jxjd_sm_name] = dialogForm_Data.value.jxjd_sm_obj.split('|')
        await API_MAP[whichDialogSubmit](({ ...dialogForm_Data.value, ...extendData, jxjd_sm_name, jxjd_sm_id }))
        handleDialogFormBtn_cancel()
        queryApi()
      }
    }
    const handleDialogFormBtn_cancel = (formRefKey) => {
      dialogVisible_addOrEdit.value = false
    }
    // #endregion

    // #region (dialog add/edit)
    const dialogVisible_addOrEdit = ref(false)

    const dialogForm_Ref_addOrEdit = ref()
    const dialogForm_Rules_addOrEdit = reactive({
      'jxjd_name': { required: true, message: '检查任务名称不能为空', trigger: 'submit' },
      'jxj_id': { required: true, message: '检查任务编号不能为空', trigger: 'submit' },
      'jxjd_sm_obj': { required: true, message: '学校名称不能为空', trigger: 'submit' },
      // 'jxjd_sm_name': { required: true, message: '学校名称不能为空', trigger: 'submit' },
      // 'jxjd_sm_id': { required: true, message: '学校编号不能为空', trigger: 'submit' },
      'jxjd_jczcy': { required: true, message: '检查组成员不能为空', trigger: 'submit' },
      'jxjd_jczcy_json': { required: true, message: '检查组成员不能为空', trigger: 'submit' },
      'jxjd_jczyj': { required: true, message: '检查组意见不能为空', trigger: 'submit' },
      'jxj_xxknjwt': { required: true, message: '学校困难及问题不能为空', trigger: 'submit' },
    })
    // #endregion

    // #region (request api):
    function queryApi() {
      loading_table.value = true
      return request({
        url: URL_CUT + '/index',
        data: {
          ...queryForm_Data.value,
          limit: limit.value,
          page: currentPage.value
        }
      }).then((response) => {
        const { data } = response
        total.value = parseInt(data.total_rows)
        tableData.value = data.page_data
        return response
      }).then(() => {
        loading_table.value = false
      })
    }

    function addApi(data) {
      return request({
        url: URL_CUT + '/add',
        data: {
          [URL_SUBMIT_KEY]: omit(data, ['jxjd_sm_obj']),
        }
      })
    }

    function editApi(data) {
      return request({
        url: URL_CUT + '/edit',
        data: {
          [TABLE_KEY]: data[TABLE_KEY],
          [URL_SUBMIT_KEY]: {},
        }
      })
    }

    function deleteApi(id) {
      return request({
        url: URL_CUT + '/delete',
        data: {
          [TABLE_KEY]: id,
        }
      })
    }

    function detailApi(id) {
      return request({
        url: URL_CUT + '/detail',
        data: {
          [TABLE_KEY]: id,
        }
      })
    }

    function importApi(data) {
      return request({
        $type: 'import',
        url: URL_CUT + '/import',
        data
      })
    }

    function exportApi() {
      return download(URL_CUT + '/index', queryForm_Data.value)
    }

    const API_MAP = {
      query: queryApi,
      add: addApi,
      edit: editApi,
      delete: deleteApi,
      detail: detailApi,
      import: importApi,
      export: exportApi,
    }
    // #endregion

    // #region (page init)
    function init() {
      queryApi()
    }
    init()
    // #endregion

    function handleTree(list) {
      return list.map(item => {
        const obj = Object.assign({
          value: `${item.id}|${item.label}`
          // value: { id: item.id, label: item.label }
        }, item)
        if (item.children) {
          obj.children = handleTree(item.children)
        }
        return obj
      })

    }
    let orgTree = ref()
    request({
      url: '/user/org/list_tree',
      data: {
        uo_pid: 1036
      }
    }).then(res => {
      if (res.code === '1') {
        orgTree.value = handleTree(res.data.one_info)
        console.log('orgTree :>> ', orgTree.value);
      }
    })

    return {
      queryForm_Data,
      loading_table,
      tableData,
      dialogVisible_addOrEdit,
      dialogForm_Ref_addOrEdit,
      dialogForm_Rules_addOrEdit,
      dialogForm_Data,
      limit,
      currentPage,
      total,
      handleCurrentChange,
      handleQueryFormBtn_search,
      handleTableRowBtn_add,
      handleTableColBtn_delete,
      handleTableColBtn_detail,
      handleTableColBtn_edit,
      handleSelectionChange,
      handleTableRowBtn_delete,
      handleDialogFormBtn_submit,
      handleDialogFormBtn_cancel,

      orgTree,
    }
  }
})
</script>


<template>
  <div class="card flex-grow flex flex-col">
    <el-form inline :model="queryForm_Data">
      <el-form-item label="关键字">
        <el-input v-model="queryForm_Data.keyword"></el-input>
      </el-form-item>
      <!-- <el-form-item label="检查任务名称">
        <el-input v-model="queryForm_Data.jxjd_name" clearable />
      </el-form-item>
      <el-form-item label="检查任务编号">
        <el-input v-model="queryForm_Data.jxj_id" clearable />
      </el-form-item>
      <el-form-item label="学校名称">
        <el-input v-model="queryForm_Data.jxjd_sm_name" clearable />
      </el-form-item>
      <el-form-item label="学校编号">
        <el-input v-model="queryForm_Data.jxjd_sm_id" clearable />
      </el-form-item>
      <el-form-item label="检查组成员">
        <el-input v-model="queryForm_Data.jxjd_jczcy" clearable />
      </el-form-item>
      <el-form-item label="检查组成员JSON">
        <el-input v-model="queryForm_Data.jxjd_jczcy_json" type="textarea" />
      </el-form-item>
      <el-form-item label="检查组意见">
        <el-input v-model="queryForm_Data.jxjd_jczyj" type="textarea" />
      </el-form-item>
      <el-form-item label="学校困难及问题">
        <el-input v-model="queryForm_Data.jxj_xxknjwt" type="textarea" />
      </el-form-item> -->
      <el-form-item>
        <el-button @click="handleQueryFormBtn_search" type="primary">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="divider"></div>
    <div>
      <el-button @click="handleTableRowBtn_add" type="primary">新建反馈意见</el-button>
      <!-- <el-button @click="handleTableRowBtn_delete" type="danger">删除</el-button> -->
    </div>

    <div class="divider"></div>
    <div class="flex-auto">
      <el-table :data="tableData" @selection-change="handleSelectionChange" v-loading="loading_table"
        element-loading-background="#ffffff70">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="jxjd_name" label="检查任务名称" width="auto" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="jxj_id" label="检查任务编号" width="auto" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="jxjd_sm_name" label="学校名称" width="auto" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="jxjd_sm_id" label="学校编号" width="auto" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="jxjd_jczcy" label="检查组成员" width="auto" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="jxjd_jczcy_json" label="检查组成员JSON" width="auto" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="jxjd_jczyj" label="检查组意见" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jxj_xxknjwt" label="学校困难及问题" width="auto" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <!-- <el-button link :auto-insert-space="false" @click="handleTableColBtn_edit(scope)" type="text">编辑</el-button> -->
            <el-button link :auto-insert-space="false" @click="handleTableColBtn_detail(scope)" type="text">详情
            </el-button>
            <!-- <el-button link :auto-insert-space="false" @click="handleTableColBtn_delete(scope)" type="text">删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="flex justify-end mt-10 py-4">
      <el-pagination :page-size="limit" :current-page.sync="currentPage" @current-change="handleCurrentChange"
        background layout="total, prev, pager, next" :total="total" />
    </div>

    <el-dialog :visible.sync="dialogVisible_addOrEdit" append-to-body destroy-on-close>
      <el-form :model="dialogForm_Data" ref="dialogForm_Ref_addOrEdit" :rules="dialogForm_Rules_addOrEdit"
        label-width="140px">
        <el-form-item label="检查任务名称" prop="jxjd_name">
          <!-- <el-input v-model="dialogForm_Data.jxjd_name" clearable /> -->
          <RemoteSelect v-model="dialogForm_Data.jxj_id" :label.sync="dialogForm_Data.jxjd_name"
            url="/jdbg/xxgzjc_jcrw/index" field="jxj_id,jxj_title" />
        </el-form-item>
        <!-- <el-form-item label="检查任务编号" prop="jxj_id">
          <el-input v-model="dialogForm_Data.jxj_id" clearable />
        </el-form-item> -->
        <el-form-item label="学校名称" prop="jxjd_sm_obj">
          <!-- <el-input v-model="dialogForm_Data.jxjd_sm_name" clearable /> -->
          <el-cascader class="w-full" v-model="dialogForm_Data.jxjd_sm_obj" filterable reserve-keyword clearable
            :props="{ checkStrictly: true, emitPath: false }" :options="orgTree" :show-all-levels="false" />
        </el-form-item>
        <!-- <el-form-item label="学校编号" prop="jxjd_sm_id">
          <el-input v-model="dialogForm_Data.jxjd_sm_id" clearable />
        </el-form-item> -->
        <el-form-item label="检查组成员" prop="jxjd_jczcy">
          <el-input v-model="dialogForm_Data.jxjd_jczcy" clearable />
        </el-form-item>
        <!-- <el-form-item label="检查组成员JSON" prop="jxjd_jczcy_json">
          <el-input v-model="dialogForm_Data.jxjd_jczcy_json" type="textarea" />
        </el-form-item> -->
        <el-form-item label="检查组意见" prop="jxjd_jczyj">
          <el-input v-model="dialogForm_Data.jxjd_jczyj" type="textarea" :rows="6" />
        </el-form-item>
        <el-form-item label="学校困难及问题" prop="jxj_xxknjwt">
          <el-input v-model="dialogForm_Data.jxj_xxknjwt" type="textarea" :rows="6" />
        </el-form-item>
        <div class="flex justify-center">
          <el-button @click="handleDialogFormBtn_submit('dialogForm_Ref_addOrEdit')" type="primary">提交
          </el-button>
          <el-button @click="handleDialogFormBtn_cancel('dialogForm_Ref_addOrEdit')" type="default">取消
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>



</template>
