<!--关联项目-->
<template>
  <div class="page-contain list-contain">
    <top-nav title="关联项目"
             @query="onSearch"
             :backFunc="returnLast"></top-nav>
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :style="{marginTop: paddingTop ? paddingTop + 'px' : '0'}"
              class="data-list">
      <div>
        <van-radio-group v-model="radio">
          <van-row v-for="(item, index) in this.tableData"
                   :key="index"
                   class="data-item"
                   @click="confirm(item)">
            <van-col span="21">
              <div class="row">
                <div class="left">
                  <span class="fb">{{ item.projectCode }}</span>
                </div>
                <div class="fc8CEE fs28">{{ item.statusKey }}</div>
              </div>
              <div class="row">
                <div class="left">
                  <span>项目名称：</span>
                  <span class="fc666">{{ item.projectName }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>客户名称：</span>
                  <span class="fc666">{{ item.customer }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>产品状态：</span>
                  <span class="fc666">{{ item.productStatusKey }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>代理商：</span>
                  <span class="fc666">{{ item.agentName }}</span>
                </div>
                <div class="right">
                  <img src="@/assets/images/photo.png" />
                  <span class="fc666">{{ item.salesName }}</span>
                </div>
              </div>
            </van-col>
            <van-col span="3">
              <van-radio :name="item.id"
                         icon-size="25px"
                         style="
                  height: 100px;
                  padding-left:10px;
                  border-left: 1px solid #e9e9e9;
                " />
            </van-col>
          </van-row>
        </van-radio-group>
      </div>
    </van-list>
    <div class="content">
      <van-popup v-model="showOrgPopup"
                 position="right"
                 get-container="#app"
                 class="search-popup"
                 id="search-popup"
                 @click-overlay="handleSure(false)">
        <div class="contain">
          <div style="padding: 10px; border-bottom: 1px solid #e9e9e9;">
            查询条件
          </div>
          <van-field v-model="form.nameOrCode"
                     name="nameOrCode"
                     label="项目名称/编号"
                     input-align="right"
                     placeholder="请输入项目名称/编号"
                     clearable
                     @click="getFocus" />
          <van-field v-model="form.customer"
                     name="customer"
                     label="项目客户名称"
                     input-align="right"
                     placeholder="请输入客户名称"
                     clearable />
          <van-field readonly
                     clickable
                     :value="form.productStatus"
                     label="项目状态"
                     placeholder="请选择项目状态"
                     @click="showProjectStatus = true"
                     input-align="right" />
          <van-popup v-model="showProjectStatus"
                     position="bottom"
                     get-container="#search-popup">
            <van-picker show-toolbar
                        :columns="projectStatusKeyList"
                        @confirm="projectStatusConfirm"
                        @cancel="showProjectStatus = false" />
          </van-popup>
        </div>
        <div class="footer-btn"
             :style="{paddingBottom:system==='ios'?'15px':'0px',background:'#fff'}">
          <van-button type="info"
                      native-type="submit"
                      @click="handleSure(true)">确定</van-button>
          <van-button type="default"
                      @click="reset">重置</van-button>

        </div>
      </van-popup>
    </div>
    <!--<div class="footer-btn"
         :style="{paddingBottom:system==='ios'?'15px':'0px',background:'#fff'}">
      <van-button type="info"
                  native-type="submit"
                  @click="confirm(true)">确定</van-button>
      <van-button type="default"
                  @click="confirm(false)">取消</van-button>

    </div>-->
  </div>
</template>

<script>
import commonSelectList from '../common/commonSelectList'
import resolveKeyboardIos from '../common/resolveKeyboardIos'
import util from '../common/util'
export default {
  name: 'connect-project',
  props: {
    initId: String, // 项目ID
    customerId: String
  },
  mixins: [resolveKeyboardIos],
  data () {
    return {
      system: util.appSystem(),
      showProjectStatus: false,
      form: {
        nameOrCode: '',
        customer: '',
        customerId: '',
        productStatus: ''
      },
      projectStatusKeyList: [],
      projectStatusList: [],
      searchValue: '',
      tableData: [],
      loading: false,
      finished: false,
      showOrgPopup: false,
      radio: '',
      // 分页参数
      pager: {
        curPage: 1,
        pageSize: 20,
        total: 0
      },
      paddingTop: localStorage.getItem('paddingTop')

    }
  },
  created () {
    debugger
    this.radio = this.initId || ''
    commonSelectList
      .initDictDataGet(this, 'Crm_Product_Status')
      .then((data) => {
        this.projectStatusList = data
        let projectStatusKeyList = []
        if (data.length !== 0) {
          data.forEach((v) => {
            projectStatusKeyList.push(v.key)
          })
        }
        this.projectStatusKeyList = projectStatusKeyList
      })
  },
  methods: {
    byCustomerId (customerId) {
      this.form.customerId = customerId
      this.handleSure()
    },
    projectStatusConfirm (data) {
      this.showProjectStatus = false
      this.form.productStatus = data
    },
    handleSure () {
      this.showOrgPopup = false
      this.pager.curPage = 1
      this.tableData = []
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onSearch (val) {
      this.showOrgPopup = true
    },
    searchClose (form) {
      this.showOrgPopup = false
      this.pager.curPage = 1
      this.tableData = []
      this.form = form
      this.finished = false
      this.onLoad()
    },
    onLoad () {
      debugger
      let productStatus = this.projectStatusList.find(
        (v) => v.key === this.form.productStatus
      )
      if (productStatus) {
        this.form.productStatus = productStatus.vaule
      }
      if (this.customerId) {
        this.form.customerId = this.customerId
      }

      let param = {
        currPage: this.pager.curPage,
        pageSize: this.pager.pageSize
      }
      Object.assign(param, this.form)
      this.$axios.post({
        domain: 'crmUrl',
        url: 'project.findBasePage',
        requestType: 'body',
        data: param,
        success: function (res) {
          if (res.success) {
            let data = res.data.records || []
            this.tableData = [...this.tableData, ...data]
            this.pager.curPage++
            this.loading = false
            if (this.tableData.length === res.data.total) {
              this.finished = true
            }
          } else {
            this.$toast.fail(res.msg)
            this.finished = true
          }
        }.bind(this),
        error: function (res) {
          this.$toast.fail(res.msg)
          this.finished = true
        }.bind(this)
      })
    },
    reset () {
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.handleSure()
    },
    returnLast () { this.$emit('close', []) },

    confirm (result) {
      // let result = null
      // if (status && this.tableData.length !== 0) {
      //   this.tableData.forEach((v) => {
      //     if (this.radio === v.id) {
      //       result = v
      //     }
      //   })
      // }
      this.radio = result.id
      this.$emit('close', result)
    },
    clear () {
      let obj = {
        form: {
          nameOrCode: '',
          customer: '',
          productStatus: ''
        },
        projectStatusKeyList: [],
        projectStatusList: [],
        searchValue: '',
        tableData: [],
        loading: false,
        finished: false,
        showOrgPopup: false,
        radio: '',
        // 分页参数
        pager: {
          curPage: 1,
          pageSize: 20,
          total: 0
        }
      }
      for (let key in obj) {
        this[key] = obj[key]
      }
    }
  }
}
</script>
<style scoped lang="scss">
.list-contain {
  // padding-top: 82px;
  background-color: #f9f9f9;
}
.search-popup {
  height: calc(100vh - 80px);
  margin-top: 41px;
  width: 66%;
  .van-field__body {
    height: 60px;
  }
  .van-field__left-icon {
    line-height: 60px;
  }
}
</style>
