<style>
  .bg {
    background-color: blue;
    height: 1px;
    border: 0;
  }
  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .search_input {
    border: 0;
    outline: none;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .input-font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .btn-font{
    font:600 16px PingFang-SC-Bold;
    color: #499EDF;
  }
  .btn-color{
    background-color: #FFFFFF;
    border-radius: 10px ;
    border: 1px solid #499EDF;
  }
  .app-text {
    font-size: 12px;
  }
  .panel-self{
    border-radius: 10px;
    border:1px solid #499EDF;
    background-color: #F8F8F8;
  }
  .yybtn-color{
    border-radius: 4px ;
    border: 1px solid #499EDF;
  }
  .qxbtn-color{
    background-color: #FFFFFF;
    border-radius: 4px ;
    border: 1px solid #499EDF;
  }

</style>

<template>
  <div class="auto">
    <http-busy>
      <div class=" col-md-12 col-lg-12 ">
        <form>
          <div class="form-group" style="margin-left: 20px">
            <span class="text-right" for="c_plan_year">计划年份：</span>
            <v-select id="c_plan_year" :value.sync="c_plan_year"
            :options='c_year_list' close-on-select clear-button></v-select>
          </div>
        </form>
        <table class="table table-user-information table table-striped">
          <tr v-for="row in model.rows">
            <td>
              <table class="table panel-self">
                <tr  class="row">
                  <td class="col-xs-4 col-sm-4 col-md-4">计划名称</td>
                  <!-- <td><a href="#" :class="[(row.downloaded  || !android) ? '' : 'not-active']"  @click="showPlanItems(row.id)" class="btn btn-link">{{row.f_plan_name}}</a></td> -->
                  <td class="col-xs-4 col-sm-4 col-md-4"><a href="#"  @click="showPlanItems(row.id)">{{row.f_plan_name}}</a></td>
                  <td class="col-xs-4 col-sm-4 col-md-4"></td>
                </tr>
                <tr class="row">
                  <td class="col-xs-4 col-sm-4 col-md-4">年月</td>
                  <td class="col-xs-4 col-sm-4 col-md-4">{{row.f_plan_year}}-{{row.f_plan_month}}月</td>
                  <td class="col-xs-4 col-sm-4 col-md-4"></td>
                </tr>
                <tr class="row">
                  <td class="col-xs-4 col-sm-4 col-md-4">户数 {{row.total}}</td>
                  <td class="col-xs-4 col-sm-4 col-md-4">已检 {{row.checked}}</td>
                  <td class="col-xs-4 col-sm-4 col-md-4">未检 {{row.unchecked}}</td>
                </tr>
                <tr class="row">
                  <td class="col-xs-4 col-sm-4 col-md-4"></td>
                  <td class="col-xs-4 col-sm-4 col-md-4">已传 {{row.verifiedcnt}}</td>
                  <td class="col-xs-4 col-sm-4 col-md-4">未传 {{row.unload}}</td>
                </tr>
                <tr class="row">
                  <td class="col-xs-4 col-sm-4 col-md-4">入户 {{row.centry}}</td>
                  <td class="col-xs-4 col-sm-4 col-md-4">拒检 {{row.cdeny}}</td>
                  <td class="col-xs-4 col-sm-4 col-md-4">到访不遇 {{row.cabsent}}</td>
                </tr>
               <!-- <tr>
                  <td>下载</td>
                  &lt;!&ndash; <td><button :disabled="row.downloaded" @click="download(row, $index)" class="btn btn-primary">下载</button></td>
                </tr>-->
              </table>
            </td>
          </tr>
        </table>
      </div>
    </http-busy>
    <div style="height:50px;"></div>
   <back-page :need-back='true'  @flag="$back()"></back-page>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '安检计划界面',
  data() {
    let options = []
    let year = (new Date()).getFullYear()
    options.push({label: (year-1) + '', value: (year-1) + ''})
    options.push({label: year+'', value: year+''})
    year++
    options.push({label: year+'', value: year+''})
    return {
      user: Vue.user,
      c_plan_year: options[1].value,
      c_year_list: options,
      model: {
        rows: [],
      },
      android: Vue.android
    }
  },
  methods: {
    getPlan() {
      if (Vue.android) {
        let response = this.$androidUtil.bzLogic(`提取安检计划`, {
          f_checker_id: this.user.id,
          f_checker: this.user.name,
          f_plan_year: this.c_plan_year[0]
        })
        //this.$showMessage('fiudshfg', response.data)
        this.$set('model.rows', response.data)
        this.getCount()
      } else {
        this.$resetpost(`AndroidRest/rs/logic/提取安检计划`, {
          f_checker_id: this.user.id,
          f_checker: this.user.name,
          f_plan_year: this.c_plan_year[0]
        }).then((result) => {
          //tag
          this.$set('model.rows', result.data.data)
          this.getCount()
        })
      }
    },
  getCount(){
       let ids = ''
      let that = this
      this.model.rows.forEach(function (row, index) {
        //that.$set("model.rows[" + index + "].downloaded", false)
        that.$set("model.rows[" + index + "].verifiedcnt", that.model.rows[index].verifiedcnt)
        that.$set("model.rows[" + index + "].total", that.model.rows[index].total)
        that.$set("model.rows[" + index + "].checked", that.model.rows[index].checked)
        that.$set("model.rows[" + index + "].centry", that.model.rows[index].centry)
        that.$set("model.rows[" + index + "].cdeny", that.model.rows[index].cdeny)
        that.$set("model.rows[" + index + "].cabsent", that.model.rows[index].cabsent)
        that.$set("model.rows[" + index + "].nouse", that.model.rows[index].nouse)
        that.$set("model.rows[" + index + "].unload", that.model.rows[index].unload)
        that.$set("model.rows[" + index + "].unchecked", that.model.rows[index].unchecked)
        ids += ',\'' + row.id + '\''
      })
      let records = []
      if (Vue.android) {
        let record = HostApp._executeTask({'type':'sql','data':{'alias':'已下载计划','criteria':{'ids': ids.substring(1)}}})
        //tag)
        records = record.data.rows
        records.forEach((record)=> {
          that.model.rows.forEach((row)=> {
            if (row.id == record.id) {
              row.downloaded = true
              row.verifiedcnt = record.uploaded
              row.unload = record.total - record.uploaded
              row.total = record.total
              row.checked = record.cnt
              row.centry = record.centry
              row.cdeny = record.cdeny
              row.cabsent = record.cabsent
              row.nouse = record.nouse
              row.unchecked = record.total - record.cnt
            }
          })
        })
      }else{
        this.$resetpost('rs/sql/已下载计划',{data:{'ids': ids.substring(1)}}).then((respanse)=>{
          //tag
          records = respanse.data
          records.forEach((record)=> {
            that.model.rows.forEach((row)=> {
              if (row.id == record.id) {
                row.downloaded = true
                row.verifiedcnt = record.uploaded
                row.unload = record.total - record.uploaded
                row.total = record.total
                row.checked = record.cnt
                row.centry = record.centry
                row.cdeny = record.cdeny
                row.cabsent = record.cabsent
                row.nouse = record.nouse
                row.unchecked = record.total - record.cnt
              }
            })
          })
        })
      }
    },
    callback(index, succeed) {
      //tag
      if (!succeed) {
        this.$showMessage('下载失败')
        return
      }
      let row = HostApp.__this__.model.rows[index]
//      row.downloaded = true
//      //tag
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    download(row, index) {
      this.$showMessage('确认进行下载吗？', ['cancel', 'confirm']).then(
        (response) => {
          if (response === 'confirm') {
            HostApp.__callback__ = this.callback
            HostApp.__this__ = this
            //  this.$set("model.rows[" + index + "].downloaded", false)
            this.$androidUtil.bzLogic('CheckoutPlan', {data: {id: row.id}}).then(() => {
              this.$showMessage('下载安检计划成功！')
            }).catch(() => {
              this.$showMessage('下载安检计划失败！')
            })
          }
        }
      )
    },
    showPlanItems(f_plan_id) {
      this.$goto('res-area-list', {f_plan_id: f_plan_id}, 'self', this.refresh)
    },
    refresh() {
      this.getPlan()
    }
  },
  ready() {
      //tag
      this.$watch('c_plan_year', function (val) {
          this.getPlan()
      })
      this.refresh()
  },
}
</script>
