<!--引用拜访报告-->
<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-checkbox-group v-model="result">
          <van-row v-for="(item, index) in this.tableData"
                   :key="index"
                   class="data-item"
                   @click="radio=item.id">
            <van-col span="21">
              <div class="row">
                <div class="left">
                  <span class="status">{{ item.emergencyDegreeKey }}</span>
                  <span class="fb">{{ item.projectCode }}</span>
                </div>
                <div class="fc8CEE fs28">{{ item.statusKey }}</div>
              </div>
              <div class="row">
                <div class="left">
                  <span>任务ID：</span>
                  <span class="fc666">{{ item.taskId }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>客户名称：</span>
                  <span class="fc666">{{ item.customerName }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>事项类型：</span>
                  <span class="fc666">{{ item.itemTypeKey }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>任务描述：</span>
                  <span class="fc666">{{ item.taskContent }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>截止时间：</span>
                  <span class="fc666">{{ item.taskRequestDateFormat }}</span>
                </div>
                <div class="right">
                  <img src="@/assets/images/photo.png" />
                  <span class="fc666">{{ item.creater }}</span>
                </div>
              </div>
            </van-col>
            <van-col span="3"
                     style="padding-left:5px">
              <van-checkbox :name="item.id"
                            icon-size="25px"
                            style="
                  height: 180px;
                  padding-left:10px;
                  border-left: 1px solid #e9e9e9;
                " />
            </van-col>
            <!-- <van-col span="3"
                     style="padding: 10px">
              <van-checkbox :name="item.id"
                            style="
                  height: 100px;
                  border-left: 1px solid #e9e9e9;
                  padding: 0 20px;
                " />
            </van-col> -->
          </van-row>
        </van-checkbox-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.customerName"
                   label="客户名称"
                   placeholder="请输入客户名称"
                   input-align="right"
                   clearable
                   @click="getFocus" />

        <van-field v-model="form.taskUser"
                   label="责任人"
                   placeholder="请输入责任人"
                   input-align="right"
                   clearable
                   @click="getFocus" />

        <van-field v-model="form.creater"
                   label="发起人"
                   placeholder="请输入发起人"
                   input-align="right"
                   clearable
                   @click="getFocus" />

        <van-field v-model="form.date"
                   name="deptName"
                   label="时间范围"
                   placeholder="请选择时间范围"
                   input-align="right"
                   @click="showDatePicker = true" />
        <van-calendar v-model="showDatePicker"
                      type="range"
                      @confirm="onConfirm"
                      :min-date="minDate"
                      :max-date="maxDate" />
      </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 util from '../common/util'
import resolveKeyboardIos from '../common/resolveKeyboardIos'
export default {
  name: 'report-list',
  props: { initReportIds: Array },
  mixins: [resolveKeyboardIos],
  data () {
    return {
      system: util.appSystem(),
      form: {
        time: 0,
        customerName: '',
        taskUser: '',
        creater: '',
        date: '',
        startTime: '',
        endTime: ''
      },
      activeName: 'submit_me',
      searchValue: '',
      tableData: [],
      showDatePicker: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2030, 0, 31),
      loading: false,
      finished: false,
      showOrgPopup: false,
      result: [],
      // 分页参数
      pager: {
        curPage: 1,
        pageSize: 10,
        pageOptions: [10, 20, 30],
        total: 0
      },
      paddingTop: localStorage.getItem('paddingTop'),
    }
  },
  created () {
    this.result = this.initReportIds || []
  },
  methods: {
    onConfirm (date) {
      const [start, end] = date
      this.showDatePicker = false
      this.form.date = `${this.formatDate(start)} 至 ${this.formatDate(end)}`
      this.form.startTime = this.formatDate(start) + ' 00:00:00'
      this.form.endTime = this.formatDate(end) + ' 00:00:00'
    },
    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.onLoad()
    },
    onLoad () {
      let param = {
        currPage: this.pager.curPage,
        pageSize: this.pager.pageSize
      }
      Object.assign(param, this.form)
      this.$axios.post({
        domain: 'crmUrl',
        url: 'task.listPageByTypeCiteTask',
        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)
      })
    },
    returnLast () { this.$emit('close', []) },
    reset () {
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.handleSure()
    },
    confirm (status) {
      let result = []
      if (status && this.tableData.length !== 0) {
        this.tableData.forEach((v) => {
          if (this.result.includes(v.id)) {
            result.push(v)
          }
        })
      }
      this.$emit('close', result)
    },
    // 时间格式化成yyyy-MM-dd
    formatDate (date) {
      date = new Date(date) // 转换成Data();
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    }
  }
}
</script>
<style scoped lang="scss">
.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>
