<!--关联拜访报告-->
<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.visitCode }}</span>
                </div>
                <div class="fc8CEE fs28">{{ item.statusKey }}</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.visitSubject }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>拜访时间：</span>
                  <span class="fc666">{{ item.visitDate }}</span>
                </div>
                <div class="right">
                  <img src="@/assets/images/photo.png" />
                  <span class="fc666">{{ item.visitName }}</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-col span="3"
                     style="padding: 10px">
              <van-radio :name="item.id"
                         style="
                  height: 100px;
                  border-left: 1px solid #e9e9e9;
                  padding: 0 20px;
                " />
            </van-col> -->
          </van-row>
        </van-radio-group>
      </div>
    </van-list>
    <van-popup v-model="showOrgPopup"
               position="right"
               get-container="#app"
               class="search-popup"
               id="search-popup"
               @click-overlay="handleSure">
      <div class="contain">
        <div style="padding: 10px; border-bottom: 1px solid #e9e9e9;">
          查询条件
        </div>
        <van-field v-model="form.customer"
                   label="客户名称"
                   placeholder="请输入客户名称"
                   input-align="right"
                   clearable
                   @click="getFocus" />

        <van-field v-model="form.visitCode"
                   label="拜访编号"
                   placeholder="请输入拜访编号"
                   input-align="right"
                   clearable
                   @click="getFocus" />

        <van-field v-model="form.visitSubject"
                   label="拜访主题"
                   placeholder="请输入拜访主题"
                   input-align="right"
                   clearable
                   @click="getFocus" />

      </div>
      <div class="footer-btn"
           :style="{paddingBottom:system==='ios'?'15px':'0px',background:'#fff'}">
        <van-button type="info"
                    native-type="submit"
                    @click="handleSure">确定</van-button>
        <van-button type="default"
                    @click="reset">重置</van-button>

      </div>
    </van-popup>
    <!--<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 resolveKeyboardIos from '../common/resolveKeyboardIos'
import util from '../common/util'
export default {
  name: 'connect-report',
  props: {
    initId: String, customerId: String // 拜访报告id
  },
  mixins: [resolveKeyboardIos],
  data () {
    return {
      system: util.appSystem(),
      form: {
        unDraftFlag: 'draft',
        visitCode: '',
        customer: '',
        customerId: '',
        visitSubject: ''
      },
      searchValue: '',
      tableData: [],
      loading: false,
      finished: false,
      showOrgPopup: false,
      radio: '',
      // 分页参数
      pager: {
        curPage: 1,
        pageSize: 20,
        total: 0
      },
      paddingTop: localStorage.getItem('paddingTop')

    }
  },
  created () {
    this.radio = this.initId || ''
  },
  methods: {
    byCustomerId (customerId) {
      this.form.customerId = customerId
      this.reload()
    },
    handleSure () {
      this.showOrgPopup = false
      this.reload()
    },
    onSearch (val) {
      this.showOrgPopup = true
    },
    searchClose (form) {
      this.showOrgPopup = false
      this.form = form
      this.reload()
    },
    reload () {
      this.pager.curPage = 1
      this.tableData = []
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onLoad () {
      if (this.customerId) {
        this.form.customerId = this.customerId
      }
      let param = {
        currPage: this.pager.curPage,
        pageSize: this.pager.pageSize,
        queryParam: this.form
      }
      this.$axios.post({
        domain: 'crmUrl',
        url: 'visit.visitReportListByStatus',
        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) {
        if (key !== 'unDraftFlag') {
          this.form[key] = ''
        }
      }
      this.handleSure()
    },
    clear () {
      let obj = {
        form: {
          unDraftFlag: 'draft',
          visitCode: '',
          customer: '',
          visitSubject: ''
        },
        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]
      }
    },
    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)
    }
  }
}
</script>
<style scoped lang="scss">
.list-contain {
  padding-bottom: 120px;
  background-color: #f9f9f9;
}
// .contain {
//   span {
//     width: 100%;
//     padding: 0 0.213rem;
//   }
// }

.search-popup {
  height: calc(100vh - 80px);
  margin-top: 41px;
  width: 66%;
  .van-field__body {
    height: 60px;
  }
  .van-field__left-icon {
    line-height: 60px;
  }
}
</style>
