<template>
  <div class="jcgjList">
    <div class="jcgjList-keywords">
      <el-input v-model="queryParams.jcmc" clearable :placeholder="$t('form.placeholderInput')" @keyup.enter.native="handleQuery">
        <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
      </el-input>
    </div>
    <div class="jcgjList-jcgjlx">
      <el-radio-group v-model="queryParams.jcgjlx" @change="handleQuery">
        <el-radio-button :label="-1">{{ $t('page.business.study.study.qb') }}</el-radio-button>
        <el-radio-button :label="1" v-if="showLc">{{ $t('page.business.study.study.lc') }}</el-radio-button>
        <el-radio-button :label="3" v-if="showBj">{{ $t('page.business.study.study.bj') }}</el-radio-button>
        <el-radio-button :label="3" v-if="showLj">{{ $t('page.business.study.studyRoom.ghlj') }}</el-radio-button>
        <el-radio-button :label="5" v-if="showRy">{{ $t('page.business.study.study.ry') }}</el-radio-button>
        <el-radio-button :label="7" v-if="showXg">{{ $t('page.business.study.study.xg') }}</el-radio-button>
        <el-radio-button :label="9" v-if="showBcsm">{{ $t('page.business.resource.mjy.bcsm') }}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="jcgjList-content">
      <el-timeline style="margin-left: -30px;">
      <el-timeline-item placement="top" v-for="(item, index) in list" :key="index"  :color="item.color">
        <div class="jcgjList-title">
          <div class="jcgjList-jcmc" :style="'color:' + item.color">{{ $i18n.locale === 'zh_CN'?item.jcmc:item.jcmcEn }}</div>
          <div>{{ item.createTime }}</div>
        </div>
        <div class="jcglList-jcnr">
          <template v-if="$i18n.locale === 'zh_CN'">
            <div v-for="(pitem, pindex) in item.jcnrList" :key="pindex">
              {{ pitem.name }}：{{ pitem.value }}
            </div>
          </template>
          <template v-else>
            <div v-for="(pitem, pindex) in item.jcnrListEn" :key="pindex">
              {{ pitem.name }}：{{ pitem.value }}
            </div>
          </template>
          <div v-if="item.remark&&item.remark!==''">
            {{$t('form.remark')}}：{{ item.remark  }}
          </div>
          <div v-if="item.qmrId&&item.qmrId>0">
            {{$t('form.qmyy')}}：{{ $i18n.locale === 'zh_CN'?item.jcmc:item.jcmcEn  }}
          </div>
          <div v-if="item.qmrId&&item.qmrId>0">
            <!-- {{$t('form.signer')}}：{{ $i18n.locale === 'zh_CN'?item.qmrMc:item.qmrMcEn  }} -->
            {{$t('form.signer')}}：{{ item.qmrMc  }}
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  name: "JcgjList",
  components: {},
  props:{
    showRy:{
      type:Boolean,
      default:false
    },
    showXg:{
      type:Boolean,
      default:false
    },
    showLc:{
      type:Boolean,
      default:true
    },
    showBj:{
      type:Boolean,
      default:true
    },
    showBcsm:{
      type:Boolean,
      default:false
    },
    // 更换笼具
    showLj: {
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      list: [],
      queryParams: {
        jcmc: '',
        jcgjlx: -1
      }
    };
  },
  mounted() {
    this.list=[]
  },
  methods: {
    handleQuery() {
      this.$emit('handleQuery',this.queryParams)
    },
    init(val) {
      let that = this
      this.list = that.paseData(val)
    },
    add(val) {
      let that = this
      this.list.push(...that.paseData(val));
    },
    paseData(val) {
      let tmp = []
      _.forEach(val, function (a) {
        let item = a
        try {
          item.jcnrList = JSON.parse(a.jcnr)
          item.jcnrListEn = JSON.parse(a.jcnrEn)
        } catch (e) {
          item.jcnrList = []
          item.jcnrListEn = []
        }
        // 稽查名称颜色：1：蓝色；3：红色；5：绿色；7：橙色
        if (item.jcmcys == 1) {
          item.color = '#409EFF'
        }
        else if (item.jcmcys == 3) {
          item.color = '#F56C6C'
        } else if (item.jcmcys == 5) {
          item.color = '#67C23A'
        } else if (item.jcmcys == 7) {
          item.color = '#E6A23C'
        }
        tmp.push(item)
      })
      return tmp
    }
  }
};
</script>
