<!--
  @description: 报表统计-价格统计-搜索条件
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/02/08
-->
<template>
  <div>
    <el-form ref="searchForm" :model="searchForm" inline>
      <el-form-item v-if="roleFlag()" label="采购单位">
        <el-input v-model="searchForm.orgName" @focus="organSelect" />
      </el-form-item>
      <!-- <el-form-item label="供应商">
        <el-input v-model="searchForm.purchaseName" />
      </el-form-item> -->
      <el-form-item label="统计间隔">
        <el-date-picker
          v-model="searchForm.timeDate"
          popper-class="reportChart_date-picker"
          :value-format="elValueFormat"
          :unlink-panels="true"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="daterange"
          @change="timeDateChange"
        />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.purchaseName" @focus="onSelGoods" />
      </el-form-item>
      <el-form-item label="供应商名称">
        <!-- <el-input v-model="searchForm.supplierName" /> multiple -->
        <el-select
          v-model="searchForm.supplierId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
        >
          <!-- :loading="loading" -->
          <el-option
            v-for="item in supplierOptions"
            :key="item.supplierCode"
            :label="item.supplierName"
            :value="item.supplierId"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="primary" round @click="search">
          统计
        </el-button>
        <el-button type="primary" round @click="resetForm('searchForm')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 所属机构弹框 -->
    <organTree-dialog ref="organTree" :single-choice="false" :btn-round="true" @call-back="organTree" />
    <!-- 物料选择-->
    <!-- <category-tree-dialog :btn-round="true" :append-to-body="false" :dialog-data="purchaseDialogData" @categoryTreeInfo="categoryTreeInfo" /> -->
    <!-- 选择物料编码 -->
    <pricePlanEntryGoogsDialog :dialog-son-data="dialogSonData" v-on="$listeners" @onRes="onRes" />
  </div>
</template>
<script>
/* 混入 */
import { reportChartSearch } from './../../mixins/reportChartSearch.js'// 搜索公共方法
import { listAllSuppliers } from '@api/statisticalAnalysis/reportChart.js'
/* 组件 */
import organTreeDialog from '@/views/common/user/organizationTree/organTree-dialog' // 采购单位选择
import pricePlanEntryGoogsDialog from './pricePlanEntryGoogs-dialog' // 选择物料编码
// import categoryTreeDialog from '@/views/common/tools/categoryTree-dialog' // 物料选择
/* 公用方法*/
import { restoreInitialValue } from '@/assets/js/utils'// 过滤空的key

export default {
  components: {
    'organTree-dialog': organTreeDialog, // 采购单位选择
    pricePlanEntryGoogsDialog // 选择物资编码
    // 'category-tree-dialog': categoryTreeDialog // 物料选择
  },
  mixins: [reportChartSearch],
  data() {
    return {
      // 查询条件
      searchForm: {
        // supplierName: '', // 供应商名称
        supplierId: '', // 供应商名称
        timeDate: [], // 时间-不传给后端
        purchaseName: '', // 物资名称
        productNo: '', // 物料code
        statisticalStartTime: '', // 统计开始时间
        statisticalEndTime: '', // 统计结束时间
        orgName: '', // 采购单位名称
        orgId: '', // 采购单位ID
        orgCode: ''// 采购单位编码
      },
      purchaseData: {}, // 物料数据
      // 弹窗-展示/隐藏状态 true 展示/false 隐藏
      purchaseDialogData: {
        title: '选择物料', // 弹框标题
        dialog: false, // 供货范围
        selectCodes: [] // 当前选中的供货范围Code
      },
      // 选择物资编码弹框数据
      dialogSonData: {
        dialogVisibleGoogs: false, // 选择物资编码
        planMainId: '', // 计划id
        purchaseType: '', // 采购计划类型
        planDetailId: '' // 计划详情id
      },
      supplierNameList: [], // 供应商名称获取的数据
      supplierOptions: [] // 供应商名称的下拉框
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const data = {}
      listAllSuppliers(data).then(res => {
        this.supplierNameList = res.data
      })
    },
    // 选择时间
    timeDateChange(val) {
      this.searchForm.statisticalStartTime = this.$Moment(val[0]).format(this.momentDate)
      this.searchForm.statisticalEndTime = this.$Moment(val[1]).format(this.momentDate)
    },
    // 选择机构
    organSelect() {
      this.$refs.organTree.open({
        title: '选择机构', // 弹框标题
        dialog: true, // 弹窗状态
        selectCodes: this.searchForm.orgId && this.searchForm.orgId.split(',')// 当前选中的供货范围Code
      })
    },
    // 选择机构
    organTree(data) {
      // 选择
      this.$set(this.searchForm, 'orgName', data.labels)
      this.$set(this.searchForm, 'orgCode', data.codes)
      this.$set(this.searchForm, 'orgId', data.keys)
    },
    // 选择物料
    selectMaterial() {
      // 打开弹框
      this.purchaseDialogData.dialog = true
      this.purchaseDialogData.selectCodes = this.purchaseData.keys && this.purchaseData.keys.split(',')
    },
    // 已选物料
    categoryTreeInfo(data) {
      this.purchaseData = data
      this.searchForm.purchaseName = data.labels
      // this.formData.tenderMaterielInfoList[this.purchaseDialogData.index].productNo = data.keys // 物料编码
      // this.formData.tenderMaterielInfoList[this.purchaseDialogData.index].productName = data.labels // 物料名称
    },
    // 开启选择物资弹框
    onSelGoods() {
      // this.dialogSonData.planMainId =
      // this.planmainid // 计划id
      // this.dialogSonData.purchaseType = this.dialogData.compType // 计划编制'00'框架编制'01'
      // this.dialogSonData.planDetailId = this.dialogData.planDetailId // 计划详情id
      this.dialogSonData.dialogVisibleGoogs = true
    },
    // 拿到选择物资编码数据
    onRes(data) {
      // this.dialogData.consignContractVisible = res
      // this.purchaseData = data
      const purchaseName = []
      const productNo = []
      // 拼接内容
      this.purchaseData = data
      data.forEach(item => {
        purchaseName.push(item.purchaseName + item.purchaseSpecification)
        productNo.push(item.purchaseCode)
      })
      this.searchForm.purchaseName = purchaseName.join(',')
      this.searchForm.productNo = productNo.join(',')
    },
    /**
     * 搜索
     *  @param {searchForm} Object 查询条件
    */
    search() {
      // 11 项目经理 采购人10
      if (this.roleCode === '11' || this.roleCode === '10') {
        if (this.searchForm.purchaseName === '') {
          this.$message({
            message: '请选择物资名称',
            type: 'warning'
          })
          return false
        }
      } else {
        if (this.searchForm.purchaseName === '' || this.searchForm.orgName === '') {
          this.$message({
            message: '请选择采购单位和物资名称',
            type: 'warning'
          })
          return false
        }
      }
      this.$emit('getPurchaseData', this.purchaseData)
      const data = { ...this.searchForm }
      // 删除不需要的内容
      delete data.timeDate
      delete data.orgName
      // delete data.orgId
      // 获取父组件实例
      this.parentVm('', data)
    },
    // 重置
    resetForm(formName) {
      this.purchaseData = {}
      this.$emit('getPurchaseData', this.purchaseData)
      restoreInitialValue(this.searchForm)
      this.search()
    },
    // 供应商名称搜索方法
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.supplierOptions = this.supplierNameList.filter(item => {
            return item.supplierName.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.supplierOptions = this.supplierNameList
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
