<template>
  <div>
    <el-form
      :model="roleQueryParams"
      ref="roleQueryRef"
      v-show="roleShowSearch"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="roleQueryParams.productName"
          placeholder="请输入产品名称"
          clearable
          style="width: 240px"
          @keyup.enter="roleHandleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="roleHandleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="insuranceResetQuery">重置</el-button>
        <el-button type="info" plain icon="Upload" @click="handleImportTenantRoleList"
          >导入</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-table v-loading="roleLoading" :data="tenantRoleList">
      <el-table-column label="产品名称" prop="productName" width="150" align="left" fixed="left" />
      <el-table-column prop="scope" label="作用域" width="150" align="left">
        <template #default="scope">
          <dict-tag :options="sys_scope" :value="scope.row.scope" />
        </template>
      </el-table-column>
      <el-table-column label="产品类型" prop="productType" width="150" align="left">
        <template #default="scope">
          <dict-tag :options="bx_product_type" :value="scope.row.productType" />
        </template>
      </el-table-column>
      <el-table-column label="货币类型" prop="currency" width="150" align="left">
        <template #default="scope">
          <dict-tag :options="bx_currency_type" :value="scope.row.currency" />
        </template>
      </el-table-column>
      <el-table-column
        label="供款年期(年)"
        width="150"
        align="left"
        prop="paymentTerm"
      ></el-table-column>
      <el-table-column
        label="受保年龄范围(岁)"
        prop="insuredAgeRange"
        :show-overflow-tooltip="true"
        width="150"
        align="left"
      />
      <el-table-column
        label="基础费率(%)"
        prop="premiumRate"
        :show-overflow-tooltip="true"
        width="150"
      />
      <el-table-column label="区分吸烟" prop="smokingAllowed" width="150" align="left">
        <template #default="scope">
          <dict-tag :options="bx_smoking_allowed" :value="scope.row.smokingAllowed" />
        </template>
      </el-table-column>
      <el-table-column
        label="保障内容"
        prop="coverageContent"
        :show-overflow-tooltip="true"
        width="200"
        align="left"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
        fixed="right"
      >
        <template #default="scope">
          <el-button link type="primary" icon="Delete" @click="ProductHandleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="roleTotal > 0"
      :total="roleTotal"
      v-model:page="roleQueryParams.pageNo"
      v-model:limit="roleQueryParams.pageSize"
      @pagination="getProductList"
    />
    <!-- 保险产品导入（根据权限从保险产品池导入进来） -->
    <el-dialog
      :title="importRoleTitle"
      v-model="importTenantRoleListOpen"
      width="800px"
      append-to-body
    >
      <el-form
        :model="importTenantRoleListQueryParams"
        ref="importTenantRoleListQueryRef"
        v-show="importTenantRoleListShowSearch"
        :inline="true"
        label-width="70px"
      >
        <el-form-item label="产品名称" prop="productName">
          <el-input
            v-model="importTenantRoleListQueryParams.productName"
            placeholder="请输入产品名称"
            clearable
            style="width: 240px"
            @keyup.enter="importTenantRoleListHandleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="importTenantRoleListHandleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="importTenantRoleListResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格数据 -->
      <el-table
        v-loading="importTenantRoleListLoading"
        :data="importTenantRoleList"
        @selection-change="importTenantRoleListHandleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="产品类型" prop="productType" width="150" fixed="left" align="left">
          <template #default="scope">
            <dict-tag :options="bx_product_type" :value="scope.row.productType" />
          </template>
        </el-table-column>

        <el-table-column
          label="产品名称"
          prop="productName"
          :show-overflow-tooltip="true"
          width="150"
          align="left"
        />

        <el-table-column label="产品状态" prop="productStatus" width="150" align="left">
          <template #default="scope">
            <dict-tag :options="bx_product_status" :value="scope.row.productStatus" />
          </template>
        </el-table-column>
        <el-table-column label="作用域" prop="scope" width="150" align="left">
          <template #default="scope">
            <dict-tag :options="sys_scope" :value="scope.row.scope" />
          </template>
        </el-table-column>
        <el-table-column label="货币类型" prop="currency" width="150" align="left">
          <template #default="scope">
            <dict-tag :options="bx_currency_type" :value="scope.row.currency" />
          </template>
        </el-table-column>
        <el-table-column
          label="供款年期(年)"
          width="150"
          align="left"
          prop="paymentTerm"
        ></el-table-column>
        <el-table-column
          label="受保年龄范围(岁)"
          prop="insuredAgeRange"
          :show-overflow-tooltip="true"
          width="150"
          align="left"
        />
        <el-table-column
          label="基础费率(%)"
          prop="premiumRate"
          :show-overflow-tooltip="true"
          width="150"
        />
        <el-table-column label="区分吸烟" prop="smokingAllowed" width="150" align="left">
          <template #default="scope">
            <dict-tag :options="bx_smoking_allowed" :value="scope.row.smokingAllowed" />
          </template>
        </el-table-column>
        <el-table-column
          label="保障内容"
          prop="coverageContent"
          :show-overflow-tooltip="true"
          width="200"
          align="left"
        />
      </el-table>
      <pagination
        v-show="importTenantRoleListTotal > 0"
        :total="importTenantRoleListTotal"
        v-model:page="importTenantRoleListQueryParams.pageNo"
        v-model:limit="importTenantRoleListQueryParams.pageSize"
        @pagination="getImportTenantRoleList"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="importTenantRoleListSubmitForm">确 定</el-button>
          <el-button @click="importTenantRoleListCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="insuranceList">
import {
  listTenantProject,
  listImportTenantProject,
  addImportTenantProjectList,
  delRelTenantProject,
  listTenantUser,
  listImportTenantUser,
  addImportTenantUserList,
  delRelTenantUser,
  listTenantRole,
  delRelTenantRole,
  addImportTenantRoleList,
  listImportTenantRole,
  listMenu,
  getMenuTree,
  getImportSelectedMenuList,
  addImportTenantMenuList,
  listLeftRole,
  listRightRole,
  addRightRoleList,
  delRightRoleList,
  getFpMenuTree,
  getSelectedFpMenuList,
  addFpMenuList
} from '@/api/system/tenantPermission'
import {
  getRelTenantInsuranceList,
  getImportRelTenantInsuranceList,
  addImportInsuranceProductList,
  delInsuranceProduct
} from '@/api/insurance/index'
import { ref } from 'vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
  tenantBizId: {
    type: String,
    default: () => undefined
  },
  activeTab: {
    type: String,
    default: () => 'project'
  }
})
const { sys_role_type, bx_product_type, sys_scope, bx_smoking_allowed, bx_currency_type } =
  proxy.useDict(
    'sys_scope',
    'sys_role_type',
    'bx_product_type',
    'bx_product_status',
    'bx_smoking_allowed',
    'bx_currency_type'
  )
const route = useRoute()
const tenantRoleList = ref([])
const importTenantRoleList = ref([])
const roleShowSearch = ref(true)
const importTenantRoleListShowSearch = ref(true)
const roleLoading = ref(true)
const importTenantRoleListLoading = ref(true)
const roleTotal = ref(0)
const importTenantRoleListTotal = ref(0)
const title = ref('')
const importUserTitle = ref('')
const importRoleTitle = ref('')
const importMenuTitle = ref('')
const importTenantProjectListOpen = ref(false)
const importTenantUserListOpen = ref(false)
const importTenantRoleListOpen = ref(false)
const importTenantMenuListOpen = ref(false)
const importTenantProjectListIds = ref([])
const importTenantProjectListNames = ref([])
const importTenantUserListIds = ref([])
const importTenantUserListNames = ref([])
const importTenantRoleListIds = ref([])
const importTenantRoleListNames = ref([])
const data = reactive({
  importTenantRoleListQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: props.tenantBizId,
    productName: undefined
  },
  roleQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: props.tenantBizId,
    productName: undefined
  }
})
const { roleQueryParams, importTenantRoleListQueryParams } = toRefs(data)

//========保险产品-列表逻辑开始=========
/** 查询租户保险产品关系列表 */
function getProductList() {
  roleLoading.value = true
  getRelTenantInsuranceList(roleQueryParams.value).then(response => {
    tenantRoleList.value = response.data.records
    roleTotal.value = response.data.total
    roleLoading.value = false
  })
}
/** 保险产品列表-搜索 */
function roleHandleQuery() {
  roleQueryParams.value.pageNo = 1
  getProductList()
}
/** 保险产品列表-重置按钮操作 */
function insuranceResetQuery() {
  proxy.resetForm('roleQueryRef')
  roleHandleQuery()
}
/** 删除租户保险产品关系 */
function ProductHandleDelete(row) {
  //租户和保险产品关系表主键id
  const id = row.id
  const productName = row.productName
  proxy.$modal
    .confirm('是否确认删除产品名称为"' + productName + '"的租户和保险产品关系的数据项?')
    .then(function () {
      return delInsuranceProduct(id)
    })
    .then(() => {
      getProductList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
//========保险产品-列表逻辑结束=========

//========保险产品-导入逻辑开始=========
/** 保险产品列表-导入-查询导入租户保险产品关系列表 */
function getImportTenantRoleList() {
  importTenantRoleListLoading.value = true
  getImportRelTenantInsuranceList(importTenantRoleListQueryParams.value).then(response => {
    if (response.code === 200) {
      if (response.data && response.data.records.length > 0) {
        importTenantRoleList.value = response.data.records
        importTenantRoleListTotal.value = response.data.total
        importTenantRoleListLoading.value = false
      } else {
        importTenantRoleList.value = []
        importTenantRoleListTotal.value = 0
        importTenantRoleListLoading.value = false
      }
    } else {
      proxy.$modal.msgError(response.msg)
      importTenantRoleListLoading.value = false
    }
  })
}
/** 保险产品列表-导入保险产品 */
function handleImportTenantRoleList() {
  getImportTenantRoleList()
  importTenantRoleListOpen.value = true
  importRoleTitle.value = '导保险产品'
}
/** 保险产品列表-导入-搜索按钮操作 */
function importTenantRoleListHandleQuery() {
  importTenantRoleListQueryParams.value.pageNo = 1
  getImportTenantRoleList()
}
/** 保险产品列表-导入-重置按钮操作 */
function importTenantRoleListResetQuery() {
  proxy.resetForm('importTenantRoleListQueryRef')
  importTenantRoleListHandleQuery()
}
/** 保险产品列表-导入-多选框选中数据 */
function importTenantRoleListHandleSelectionChange(selection) {
  importTenantRoleListIds.value = selection.map(item => item.productBizId)
  importTenantRoleListNames.value = selection.map(item => item.productName)
}
/** 保险产品列表-导入-导入角色提交 */
function importTenantRoleListSubmitForm() {
  const productBizIdList = importTenantRoleListIds.value
  const importTenantRoleListNameList = importTenantRoleListNames.value
  const tenantBizId = props.tenantBizId

  proxy.$modal
    .confirm('是否确认导入产品名称为"' + importTenantRoleListNameList + '"的数据项?')
    .then(function () {
      const data = {
        productBizIdList,
        tenantBizId
      }
      return addImportInsuranceProductList(data)
    })
    .then(() => {
      importTenantRoleListOpen.value = false
      getProductList()
      proxy.$modal.msgSuccess('导入成功')
    })
    .catch(() => {})
}
/** 保险产品列表-导入-取消 */
function importTenantRoleListCancel() {
  importTenantRoleListOpen.value = false
  proxy.resetForm('importTenantRoleListQueryRef')
}
//========保险产品-导入逻辑结束=========

// 监听tab切换
watch(
  () => props.activeTab,
  newTab => {
    if (newTab == 'insurance') {
      insuranceResetQuery()
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped></style>
