<template>
  <div style="margin-top: 30px;height: auto">
    <div v-for="( index,item) in items" class="navs row col-sm-12" style="overflow: hidden;display: inline-block">
      <p :class="[active === index ? 'active' : '',clientWidth>1600 ? 'col-sm-2' : 'col-sm-4']">
        <nobr>{{ item.f_apply_type }}</nobr>
      </p>
      <div :class="[clientWidth>1600 ? 'col-sm-4' : 'col-sm-8']">
        <label  style="text-indent: 2em">
          通过
          <input type="radio" :name="'radio'+index" value="通过" v-model="item.f_apply_state">
        </label>
        <label>
          未通过
          <input type="radio" :name="'radio'+index" value="未通过" v-model="item.f_apply_state">
        </label>
      </div>
      <div class="col-sm-6" v-show="clientWidth>1600">
        <div class="col-sm-9 form-group" style="margin: 0">
          <label style="margin: 0">意见：</label>
          <input type="text" class="input_search" style="width: 70% !important;" v-model="item.f_apply_msg"/>
        </div>
        <button class="button_search col-sm-2" @click="confirm(item,index)" :disabled="disabled">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
//import * as Util from '../Util'
export default {
  props: {
    // 步骤总数
    items: {
      type: Array,
      required: true
    },
    // 当前步骤
    active: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data () {
    return {
      disabled: false,
      clientWidth: document.body.clientWidth
    }
  },
  methods: {
    async confirm (row, index) {
      this.disabled = true
      // console.log(JSON.stringify(row))
      if (row.id === '') {
        delete row.id
      }
      if (index !== 0 && this.$parent.items[index - 1].f_apply_state === '未通过' && this.$parent.items[index - 1].id === '') {
        this.disabled = false
        this.$showAlert('请先通过之前的步骤！！', 'warning', 2000)
        return
      }
      try {
        row.f_person = this.$login.f.name
        row.f_apply_date = Util.toStandardTimeString()
        let {data} = await this.$resetpost('rs/entity/t_apply_info', row, {resolveMsg: '保存成功', rejectMsg: '操作失败'})
        this.$dispatch('nextindex', index, row)
        if (!row.id) {
          row.id = data.id
        }
      } catch (e) {
        this.disabled = false
      }
      this.disabled = false
    }
  },
  compiled () {
    window.onresize = () => {
      return (() => {
        this.clientWidth = document.body.clientWidth
      })()
    }
  }
}
</script>

<style lang='css' scoped>

label {
  padding: 0;
  line-height: 40px;
}

.navs {
  height: 55px;
}

.navs p {
  padding: 0 10px 0 10px;
  line-height: 40px;
  background: #50abe4;
  display: inline-block;
  color: #fff;
  position: relative;
  text-indent: 1.2em;
}

.navs p:after {
  content: '';
  display: block;
  border-top: 20px solid #50abe4;
  border-bottom: 20px solid #50abe4;
  border-left: 20px solid #fff;
  position: absolute;
  right: -20px;
  top: 0;
}

.navs p:after {
  content: '';
  display: block;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #50abe4;
  position: absolute;
  right: -20px;
  top: 0;
  z-index: 10;
}

.navs p:before {
  content: '';
  display: block;
  border-top: 20px solid #50abe4;
  border-bottom: 20px solid #50abe4;
  border-left: 20px solid #fff;
  position: absolute;
  left: 0px;
  top: 0;
}

.navs p.active {
  background-color: #16A085;
}

.navs p.active:after {
  border-left-color: #16A085;
}

.navs p.active:before {
  border-top-color: #16A085 !important;
  border-bottom-color: #16A085 !important;
}

</style>
