<template>
  <el-dialog title="选择数据" :visible.sync="isVisible" width="600px" class="data-main">
<!--    <el-button type="primary" @click="jumpUrl()">新 增</el-button>-->
    <div class="flex-aic" v-for="(iitem, index) in list" style="position:relative;margin-bottom: 10px;">
      <el-input v-model="iitem.name" placeholder="请输入关键字" style="width: 60%;margin-right:10px;"></el-input>
      <div class="ab-main" v-if="iitem.showTab">
        <p v-for="item in iitem.dataList" @click="chooseItem(iitem, item)">{{item.name}}</p>
        <p v-if="iitem.dataList.length<=0" @click="chooseItem(iitem)">无匹配内容</p>
      </div>
      <el-button type="primary" @click="handleChoose(iitem)" slot="reference">搜索</el-button>



      <el-button type="primary" v-if="index == list.length - 1" @click="handleAdd()" style="margin-left: 10px;">+</el-button>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="!isClick" @click="okSend()">提 交</el-button>
      <el-button type="primary" v-else style="opacity: 0.6;" disabled>提 交</el-button>
    </div>
  </el-dialog>
</template>
<script type="javascript">
  import { getItemByType, setOrderItem } from 'api/website/order/index'

  export default {
    props: ['oneRow'],
    name: 'selectDataDialog',
    data() {
      return {
        isClick: false, // 是否点击了发货
        loading: false,
        list: [{id: 1, dataList: [], name: ''}], // 已选数组
        isVisible: false,
      }
    },
    watch: {
      isVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit('selectDataEvent', false)
        }
      }
    },
    mounted() {
      this.isVisible = true
    },
    methods: {
      /**
       * 新增
       */
      handleAdd(){
        this.list.push({id: this.list.length+1, dataList: [], name: ''})
      },
      /**
       * 选择数据
       */
      chooseItem(iitem, item){
        if(item){
          iitem.checkedObj = item
          iitem.name = item.name
        } else {
          iitem.checkedObj = undefined
          iitem.name = ''
        }
        iitem.showTab = false
        this.$forceUpdate()
      },
      /**
       * 搜索
       */
      handleChoose(row){
        this.list.map(function(item){
          item.showTab = false;
        })
        this.getList(row)
      },
      /**
       * 弹框-取消
       * */
      cancel() {
        this.$emit('selectDataEvent', false)
      },
      /**
       * 选择数据列表
       */
      getList(row) {
        let _this = this
        getItemByType({type: this.oneRow.type, name: row.name}).then((response) => {
          if(response.status == 200){
            row.dataList = response.data
            row.showTab = true
            _this.$forceUpdate()
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        });
      },
      /**
       * 新增-跳转界面
       */
      jumpUrl(){
        if(this.oneRow.type == 1){
          // 标准数据新增
        } else if(this.oneRow.type == 2){
          // 行业应用
          this.$router.push({path:'/industryApplication/applicationList'})
        }  else if(this.oneRow.type == 3){
          // 影像图库
          this.$router.push({path:'/webSiteManagement/imageLibrary'})
        }
      },
      /**
       * 确定
       */
      okSend() {
        let _this = this
        if(this.isClick){
          return
        }
        this.isClick = true
        setTimeout(function(){
          _this.isClick = false
        }, 2000)
        let itemInfoDtoList = []
        this.list.map(function(item){
          if(item.checkedObj){
            let p = {
              id: item.checkedObj.id,
              type: item.checkedObj.type // 类型 1、标准数据，2、影像图库，3、行业应用信息,
            }
            itemInfoDtoList.push(p)
          }
        })
        if(itemInfoDtoList.length<=0){
          this.$message.warning("请选择数据")
          return;
        }
        let params = {
          orderId: this.oneRow.orderId,
          itemInfoDtoList: itemInfoDtoList
        }
        setOrderItem(params).then((response) => {
          if(response.status == 200){
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
              duration: 2000
            });
            this.$emit('selectDataEvent', true)
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        });
      }
    }
  }
</script>
<style lang="scss">
  .data-main{
    .el-dialog{
      height: calc(100vh - 260px);
      min-height:300px;
    }
    .el-dialog .el-dialog__body{
      overflow: auto;
      height: calc(100vh - 400px);
      min-height: 150px;
    }
    .ab-main{
      position: absolute;
      top: 45px;
      padding: 0 20px;
      border-radius: 4px;
      width: 60%;
      max-height: 200px;
      overflow: auto;
      background: rgb(255, 255, 255);
      border: 1px solid rgb(244, 244, 244);
      z-index: 9;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      p{
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 1px solid #f4f4f4;
      }
      p:last-child{
        border-bottom: none;
      }
    }
    .ab-main::-webkit-scrollbar, .el-dialog__body::-webkit-scrollbar{width: 0px;}
  }
</style>
