<template>
  <div>
    <ul v-for="(item, index) in dataList" :key="index" class="data-list" @click="clickBase(item)">
      <li>
        <span class="data-address">{{item.approveTitle}}</span>
        <span class="state" :class="item.approveState == '1' ? 'stateGreen' : 'stateOrange'">{{item.approveStateText}}</span>
      </li>
      <li class="content" v-if="!isChj(item.approveType)">
        <span>客户名称：{{item.customerName}}</span>
        <span v-if="item.approveType == 'kfAccessCard'||
        item.approveType == 'kfTenantNameplate'||
        item.approveType == 'kfDisplayScreen'||
        item.approveType == 'kfDecorationRestoration'||
        item.approveType == 'kfCustomerDemands'||
        item.approveType == 'kfCommunicationBusiness'||
        item.approveType == 'kfSporadicCharges'||
        item.approveType == 'kfRenovation'">应收含税总额：{{JSON.parse(item.approveParam).countCharge}}</span>
        <span v-if="item.approveType == 'kfRefundOfDeposit'">应退押金总额： {{JSON.parse(item.approveParam).countCharge}}</span>
        <span v-if="item.approveType == 'fwContractChange'||item.approveType == 'fwContractAdd' ">房间信息：{{JSON.parse(item.approveParam).roomCodes}}</span>
        <span v-if="item.approveType == 'cwContractTZ'||item.approveType == 'cwContractAdd' ">车位信息：{{JSON.parse(item.approveParam).parkingNumbers}}</span>
        <span>开始时间：{{formTime(item.approveLaunchDate)}}</span>
      </li>
      <li class="content" v-else>
        <span v-if="['chjClimbingHigh','chjFireWork','chjTmpElectricity','chjConfinedSpace'].includes(item.approveType)">申请单位：{{JSON.parse(item.approveParam).applyUnit}}</span>
        <span v-if="['chjClimbingHigh','chjFireWork','chjConfinedSpace'].includes(item.approveType)">作业内容：{{JSON.parse(item.approveParam).taskContent}}</span>
        <span v-if="item.approveType == 'chjConfinedSpace'">
          作业空间：{{JSON.parse(item.approveParam).taskSpace}}
        </span>
        <template v-if="item.approveType == 'chjSprayTask'">
          <span>业户姓名：{{JSON.parse(item.approveParam).ownerName}}</span>
          <span>单元楼层：{{JSON.parse(item.approveParam).unitFloor}}</span>
          <span>停水区域：{{JSON.parse(item.approveParam).waterOffArea}}</span>
        </template>
        <template v-if="item.approveType == 'chjWorkContact'">
          <span>被联系部门：{{JSON.parse(item.approveParam).contactedDep}}</span>
          <span>被联系人：{{JSON.parse(item.approveParam).contactedPerson}}</span>
          <span>联系内容：{{JSON.parse(item.approveParam).contactContent}}</span>
        </template>
      </li>
      <!-- <li class="div_item_detail"> -->
      <!-- <span class="span_detail">详情</span> -->
      <!-- </li> -->
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {
    listData: {
      type: Array,
      default: []
    },
    state: {
      type: String,
      default: ""
    }
  },
  created() {},
  data() {
    return {
      dataList: [],
      typeStatus: '', //代办或者已办
      caohejing: ['chjClimbingHigh', 'chjFireWork', 'chjConfinedSpace', 'chjSprayTask', 'chjTmpElectricity', 'chjWorkContact'],
      hasFee: [ // 有费项
        "kfAccessCard", // 门禁卡
        'kfTenantNameplate', // 租户铭牌申请
        'kfDisplayScreen', // 显示屏申请
        'kfRenovation', // 二次装修
        'kfCommunicationBusiness', // 通讯业务
        'kfDecorationRestoration', // 装修复原
        'kfCustomerDemands', // 客户诉求
        'kfSporadicCharges' // 零星收费

      ],
      noFee: [ // 不含费项的
        'kfCheckInInspect', // 入住验收
        'kfCheckInApply', // 入住申请
        'kfRecoveryOffer', // 复原报价
        'kfCustomerComplaints', // 客户投诉
        'kfRefundOfDeposit' // 押金退还
      ],
      hasEdit: [
        'kfRentWithDraw' // 退租
      ],
      // kfRefundOfDeposit, cwContractTZ  cwContractAdd 车位, fwContractAdd 房屋租赁  ycContractAdd //有偿服务
      //  fwContractChange  房屋合同变更
      fwKeyArr: ["fwContractAdd", "fwContractChange", "fwContractTZ"],
      cwKeyArr: ["cwContractAdd", "cwContractChange", "cwContractTZ", "cwContractDelay"],
      ycKeyArr: ["ycContractAdd", "ycContractChange", "ycContractTZ","ycContractAdd_0", "ycContractAdd_1"]

    };
  },
  watch: {
    listData: {
      handler: function(val, oldVal) {
        this.handleData();
      },
      deep: true
    },
    state: {
      handler: function(val, oldVal) {
        this.typeStatus = val;
      },
      deep: true
    }
  },
  methods: {
    isChj(flag) {
      return this.caohejing.includes(flag)
    },
    handleData() {
      //处理数据
      var self = this;
      if (this.listData.length > 0) {
        this.listData.forEach(item => {});
      }
      this.dataList = this.listData;
    },
    formTime(time) {
      if (time != '') {
        var newTime = time.split(' ')[0];
        return newTime
      }

    },
    clickBase(item) {
      let path = '';
      if (this.caohejing.includes(item.approveType)) {
        path = '/chjApproveDetail'
      } else {
        if (this.hasFee.includes(item.approveType)) {
          path = '/approveDetailFee'

        } else if (this.noFee.includes(item.approveType)) {
          path = '/approveDetailNoFee'

        } else if (this.hasEdit.includes(item.approveType)) {
          path = '/approveDetailEdit'
        } else if (this.cwKeyArr.indexOf(item.approveType) !== -1) { // 车位
          path = '/approveDetailCw'
        } else if (this.fwKeyArr.indexOf(item.approveType) !== -1) { // 房屋租赁
          path = '/approveDetailFw'

        } else if (this.ycKeyArr.indexOf(item.approveType) !== -1) { // 有偿服务
          path = '/approveDetailYc'

        } else {
          path = '/approveDetail'
        }

      }
      this.$router.push({
        path: path,
        query: {
          auditItemId: item.auditItemId,
          doneOrNotDone: item.doneOrNotDone,
          actTaskId: item.actTaskId,
          state: item.state,
          processKey: item.approveType,
          serialNumber: item.fkId
        }
      })
    },

  }
};

</script>
<style scoped>
.content {
  padding: 9px 15px;
  overflow: hidden;
  min-height: 0px !important;
  width: 100%;
}

.content span {
  display: block;
  line-height: 30px;
  font-size: 13px;
  color: #808695;
}

.content p {
  font-size: 15px;
  color: #17233d;
  margin-bottom: 5px;
  word-break: break-all;
}

.data-list {
  margin-top: 10px;
  background: #FFFFFF;
  padding: 5px 10px;
  list-style: none;
  border-bottom: 1px solid #e8eaec;

}

.data-address {
  width: calc(100% - 80px);
  /*overflow: hidden;
  text-overflow: ellipsis;*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*-webkit-line-clamp: 1;*/
  float: left;
  margin-left: 15px;
  font-size: 15px;
  font-weight: bold;
}

.state {
  float: right;
  text-align: right;
  display: inline-block;
  padding: 5px;
  border-radius: 2px;
}

.stateOrange {
  color: #ff9900;
  background-color: #fcf6f2;
}

.stateGreen {
  color: #19be6b;
  background-color: #eef8f6;
}

.div_item_detail {
  display: flex;
  flex-direction: row-reverse;
}

.span_detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #57A2FF;
  font-size: 14px;
}

.span_detail::after {
  content: " ";
  display: block;
  height: 12px;
  width: 12px;
  margin-left: 2px;
  background: url("../../../assets/images/icon_right_case.png") no-repeat;
  background-size: 100%;
}

</style>
