<template>
 <div v-loading="loading" style="margin-bottom:10px">
    <ex-table
      :columns="[
        ...columns,
        ...(readonly ? [] : [{ label:'操作', _slot_:'action', width:'80px' }])
      ]"
      :table="table"
      :data="planList"
      :noPagination="noPagination"
      style="margin: 15px 0 0 0"
      :page="pageInfo"
      @page-curr-change="handlePageChange"
      @page-size-change="handleSizeChange"
    >
      <template #is_check="{scope}">
        <el-tag size="mini" :type="String(scope.row.is_check) === '1' ? '' :'info'">
         {{String(scope.row.is_check) === "1" ?  "已选择" : "未选择"}}
        </el-tag>
      </template>

      <template #letter="{scope}">
        <a v-if="scope.row.plan_file" style="color:#409EFF" :href="scope.row.plan_file">{{getFileNameWithUrl(scope.row.plan_file)}}</a>
        <p v-else>--</p>
      </template>

      <template #action="{scope}">
        <el-button size="mini" type="text" @click="handleCheck(scope.row)">{{
          String(scope.row.is_check) === "1" ?  "取消选择" : "选择"
          }}</el-button>
      </template>
    </ex-table>
 </div>
</template>

<script>
import asyncRequest from "@/apis/service/customerService/demandOrder";
import mixinPage from "@/mixins/elPaginationHandle";
export default {
  props:['sitem','readonly'],
  mixins:[mixinPage],
  data(){
    return {
      loading:false,
      planList: [],
      table: {
        stripe: true,
        border: true,
        'max-height': '800px'
      },
       pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      parmValue:{
        page:1,
        size:15
      },
     columns: [
       {
           type: 'index',
           label: '序号',
           width: '70px'
       },
       {
           prop: "planCode",
           label: '计划预算函编号',
           minWidth: '120px',
       },
       {
           prop: "ststus",
           label: '是否选中',
           minWidth: '120px',
           _slot_:'is_check'
       },
       {
           prop: "plan_file",
           label: '计划预算函预览',
           minWidth: '126px',
           _slot_:'letter'
       },
       {
           prop: "pay_total_price",
           label: '计划预算函金额',
           minWidth: '180px',
       },
       {
           prop: "store_name",
           label: '店铺名称',
           minWidth: '156px',
       },
       {
           prop: "supplierName",
           label: '方案上传公司',
           minWidth: '156px',
       },
       {
           prop: "nickname",
           label: '创建人',
           width: '150px',
       },
       {
           prop: "create_time",
           label: '创建时间',
           width: '150px',
       }
      ]
    }
  },
  watch:{
    'sitem':{
      handler(val = {}){
        const { id } = val
        if(!id) return
        this.searchList(id)
      },
      immediate: true,
      deep:true
    }
  },
  methods:{
    async handleCheck(row){
      const { id, is_check } = row
      const status = String(is_check) === "1" ? "0" : "1"
      const result = await asyncRequest.planCheck({ id:[id], req_id: this.sitem.id, status})
      if(result.code === 1){
        this.searchList()
      }
    },
    getFileNameWithUrl(url){
      const chunks = url.split('/')
      const fullFileName = chunks[chunks.length - 1]
      const [ fileName, suffix ] = fullFileName.split('.')
      return (fileName.length > 10 ? fileName[0] + fileName[1]  + '...' + fileName[fileName.length -1] : fileName) + '.' + suffix
    },
    async searchList(id){
      this.loading = true
      const { code, data }  = await asyncRequest.planList({ req_id: id ? id :this.sitem.id, plan_type: 3 , status:2 ,...this.parmValue})
      this.loading = false

      if(code !== 1) return
      const { list = [], count = 0 } = data
      this.planList = list;
      this.$emit('selectedChange',list.filter(({is_check}) => String(is_check) === "1").length)
      this.noPagination = Number(count) <= 15
      this.pageInfo.total = count
    }
  }
}
</script>
