<template>
<div>
  <button @click="" class="btn btn-success" style="margin-right: 10px">操作卡</button>
  <button @click="$parent.cancel()" class="btn btn-success" style="margin-right: 10px">退出</button>
  <div title="操作卡选择" v-if="chooseCard===true" style="height: auto;margin-top: 20px">
      <label class="font text-left">操作卡：</label>
      <v-select
        :value.sync="operationcard"
        v-model="operationcard"
        :options='operationcards'
        placeholder='请选择操作卡'
        close-on-select
        :search="true"
        style="height: 40%"
        :value-single="true">
      </v-select>
      <div style="margin-top: 20px">
        <button type="button" class="col-xs-5  btn btn-default" style="" @click='$parent.cancel()'>取消</button>
        <button type="button" class="col-xs-5  btn btn-default" style="margin-left:2%"  @click='confirm'>确认</button>
      </div>
  </div>
  <div title="操作卡" v-if="showCard" style="margin-top: 40px">
    <x-report v-if="showCard" :key="key" src="http://117.34.91.57:4781"  :configname="fileName" :configdata="local" @save-config="saveConfig"></x-report>
    <button type="button" class="col-xs-5  btn btn-default" style="margin-left: 45%" @click='showCard= false'>取消</button>
  </div>
</div>
</template>
<script>
export default {
  props: ['f_userinfo_id'],
  data() {
    return {
      model: {rows: {}},
      chooseCard:true,
      showCard:false,
      operationcards: [],
      operationcard: '',
      f_text:'',
      local:{},
      key:"x-report-1",
      fileName:''
    }
  },
  ready(){
    this.getCard()
  },
  methods: {
    // 操作卡的保存
    saveConfig (config) {
      console.log('配置数据需要自行保存: ' + JSON.stringify(config, null, 2))
      console.log(this.$login)
      const getTime = new Date().getTime();
      const time = new Date(getTime);
      const year = time.getFullYear(); // 年
      const month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
      const date = time.getDate().toString().padStart(2, '0'); // 日
      const hour = time.getHours().toString().padStart(2, '0'); // 时
      const minute = time.getMinutes().toString().padStart(2, '0'); // 分
      const second = time.getSeconds().toString().padStart(2, '0'); // 秒
      const now = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
      console.log(now)
      this.$resetpost('/rs/sql/tel_singleTable_OrderBy', {
        data: {
          f_process_id: this.f_userinfo_id,
          f_file_name: this.local.title,
          f_text: this.local,
          f_create_operator: this.$login.f.name,
          f_create_date: now
        }
      }, {resolveMsg: null, rejectMsg: null}).then(res => {
        if (res.data == 200) {
          this.$showMessage('操作卡保存成功！')
        }
      })
    },
    confirm(){
      //遍历this.operationcards，根据value，获取label
      let operationcard = this.operationcards.filter(item => {
        return item.value === this.operationcard
      })
      this.fileName=operationcard[0].label.split(' ')[0]
      console.log('operationcard',this.operationcard)
      if(this.operationcard!==''){
        this.getFText()
        this.showoperationcards()
      }
    },
    showoperationcards(){
      this.local = JSON.parse(this.f_text)
      console.log('local---->',this.local)
      debugger
      this.chooseCard = false
      this.showCard = true
    },
    getFText(){
      this.model.rows.filter(row => {
        if(row.id === this.operationcard){
          this.f_text = row.f_text
        }
      });
      console.log('text------>',this.f_text)
    },
    getCard(){
      console.log('f_userinfo_id----->',this.f_userinfo_id)
      this.$resetpost('/rs/sql/tel_singleTable_OrderBy',{data: {
          items: '*',
          tablename: 't_operationcard',
          condition: `f_process_id  = '${this.f_userinfo_id}'`,
          orderitem: 'id desc'
        }
      },{resolveMsg:null,rejectMsg:null}).then(res=>{
        this.model.rows = res.data
        console.log('res.data',res.data)
        this.getList()
      })
    },
    getList(){
      this.operationcards = this.model.rows.map(
        item => ({
          label:item['f_file_name']+' '+item['f_create_date'],
          value:item['id'],
        })
      )
    },

  }
}
</script>

<style>

</style>
