<!--
  @description: 计划打包添加行项目信息
  @author: lxl
  @date： 2020-11-02 14:32
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogData.dialogVisible"
      append-to-body
      :title="'行项目信息'"
      custom-class="el-dialog__body-p8 el-dialog_table"
      width="1200px"
    >
      <!--查询条件-->
      <div class="crud_menu_title clearfix">
        <span class="icon-line fl">查询条件</span>
        <span class="fr pointer" @click="handleToggleSearch">
          <el-link
            :underline="false"
            :class="toggleSearchStatus?'arrow-is-active':''"
            type="primary"
            class="toggleSearchStatus icon el-icon-arrow-down"
          />
          {{ toggleSearchStatus?'收起高级查询' :'展开高级查询' }}
        </span>
      </div>
      <section :class="{ SearchContent_show: toggleSearchStatus }" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="98px"
            label-position="left"
            inline
            @submit.native.prevent
          >
            <!-- 行项目编号 -->
            <el-form-item
              ref="purchaseNo"
              label="行项目编号"
              prop="purchaseNo"
            >
              <gx-input
                v-model.trim="searchForm.purchaseNo"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!-- 物资编码 -->
            <el-form-item
              ref="purchaseCode"
              label="物资编码"
              prop="purchaseCode"
            >
              <gx-input
                v-model.trim="searchForm.purchaseCode"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!-- 物资名称 -->
            <el-form-item
              ref="purchaseName"
              label="物资名称"
              prop="purchaseName"
            >
              <gx-input
                v-model.trim="searchForm.purchaseName"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!-- 计划名称 -->
            <el-form-item
              ref="ykPlannoT"
              label="计划名称"
              prop="ykPlannoT"
            >
              <gx-input
                v-model.trim="searchForm.ykPlannoT"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!-- 品牌 -->
            <el-form-item
              ref="purchaseBrand"
              label="品牌"
              prop="purchaseBrand"
            >
              <gx-input
                v-model.trim="searchForm.purchaseBrand"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!-- 二级专业分类 -->
            <el-form-item
              ref="purchaseClassification"
              label="二级专业分类"
              prop="purchaseClassification"
            >
              <gx-input
                v-model.trim="searchForm.purchaseClassification"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!-- 创建日期 -->
            <!-- <el-form-item
              label="开始日期"
            >
              <el-date-picker
                v-model="searchForm.datePicker"
                :value-format="elValueFormatDate"
                type="daterange"
                placeholder="选择开始日期时间"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:200px;"
                @change="onHandelTime"
              />
            </el-form-item> -->
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重 置
          </el-button>
        </div>
      </section>
      <section style="marginTop:10px">
        <stayBaleTable ref="mulTable" :table-data="tableData" :loading="loading" @delMultiple="onDelMultiple" @checkFile="onCheckFile" />
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="confirmLoading" @click="ensure">
          确 定
        </el-button>
        <el-button @click="dialogData.dialogVisible=false">
          取 消
        </el-button>
      </div>
    </el-dialog>
    <!-- 查看附件 -->
    <checkFIleCompDialog :dialog-file-data="dialogFileData" />
  </div>
</template>
<script>
//  api
import { saveProcurementPackedDetailList, getPurchasePlanDetailsWaitPackList } from '@/api/procurement/purchasplan' // 打包
//  组件
import stayBaleTable from '../stayBaleTable' // 待打包
import pagination from '@comp/common/pagination/pagination' // 分页组件
// 公用
import { ListMixin } from '@/mixins/ListMixin' // 分页
// import { procurementPlanGrounpMixins } from '@views/procurement/procurementPlan/mixins/procurementPlanGroupMixins' // 字典信息
import checkFIleCompDialog from '@/views/procurement/procurementPlan/components/checkFIleComp-dialog.vue'// 查看附件

import { filterObj, restoreInitialValue, filterDictText } from '@/assets/js/utils'

export default {
  name: 'AddLientItemDialog',
  components: {
    stayBaleTable,
    pagination,
    checkFIleCompDialog
  },
  mixins: [ListMixin],
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false
        }
      }
    }
  },
  data() {
    return {
      dialogFileData: {
        checkFileVisible: false, // 查看附件弹框状态
        bizId: '', // 附件id
        fileType: '' // 附件类型
      },
      tableData: [], // 列表数据
      planDetailIds: '', // 计划id
      loading: true,
      confirmLoading: false,
      searchForm: {
        // datePicker: [], // 选择开始时间结束时间
        // tenderMethod: '', // 采购方式
        purchaseName: '', // 物资名称
        purchaseCode: '', // 物资编码
        purchaseNo: '', // 行项目编号
        // createTimeStart: '', // 创建开始时间
        // createTimeEnd: '', // 创建结束时间
        packStatus: '00', // tabs默认值
        column: '', // 排序字段
        orderSort: '' // 升序/降序
      }
    }
  },
  watch: {
    'dialogData.dialogVisible'(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.mulTable.empitSel()
          this.loadData() // 数据初始化
        })
      }
    }
  },
  methods: {
    filterDictText, // 数据字典查询
    // 选择时间触发事件
    // onHandelTime(val) {
    //   if (val) {
    //     this.searchForm.createTimeStart = val[0]
    //     this.searchForm.createTimeEnd = val[1]
    //   }
    // },
    // 数据初始化
    loadData() {
      const params = this.getQueryParams()
      getPurchasePlanDetailsWaitPackList(params).then((response) => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData() // 查询数据
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.packCheckedStatus = '00' // 打包选中状态 00-未选中;01-已选中
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 重置
    resetForm() {
      // 清除数据
      restoreInitialValue(this.searchForm)
      this.searchForm.packStatus = '00'
      this.onSearch()
    },
    // 弹框关闭
    onClose(data) {
      this.dialogData.dialogVisible = false
      this.$emit('onStart', data)
    },
    // 选择表格数据方法
    onDelMultiple(res) {
      const bales = []
      res.filter((item) => {
        bales.push(item.planDetailId)
      })
      this.planDetailIds = bales.join(',')
    },
    // 附件查看
    onCheckFile(res) {
      this.dialogFileData.bizId = res.planDetailId
      this.dialogFileData.checkFileVisible = true
    },
    // 确定
    ensure() {
      this.confirmLoading = true
      const params = {
        planDetailIds: this.planDetailIds,
        tenderId: this.dialogData.tenderId
      }
      // 保存选择数据
      saveProcurementPackedDetailList(params).then((res) => {
        this.confirmLoading = false
        this.onClose(res.data)
      }).catch(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>
