<template>
  <div class="pop-addForm">
    <div class="header-box">
      <i class="go-back el-icon-arrow-left" @click="close"></i><span>{{ queryDialogConfig.dialogDesc }}</span>
    </div>
    <div class="choose-pro-list">
      <div class="item" v-for="(row,index) in rows" :key="index" @click="chooseRow(row)">
        <p class="name"><span>{{ row[queryDialogConfig.mainFieldName] }}</span></p>
        <p v-for="(fieldDTO,index2) in queryDialogConfig.fieldDTOs" :key="index2">{{ fieldDTO.fieldDesc }}:{{
          getCellValue(row, fieldDTO)
          }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "queryDialog",
  props: {
    option: {
      type: Object,
      default: () => {
      }
    }
  },
  inject: ["getBillJson"],
  data() {
    return {
      rows: [],
      queryDialogConfig: {}
    }
  },
  created() {
    this.initTable1();
  },
  methods: {
    initTable1() {
      this.queryDialogConfig = this.option.itemDTO.addConfig.queryDialogConfig;
      this.getData();
    },
    getCellValue(row, fieldDTO) {
      let rowValue = row[fieldDTO.fieldName];
      if (fieldDTO.fieldStyle == 5) {
        return rowValue;
      } else if (fieldDTO.fieldStyle == 7) {
        let item = fieldDTO.fieldStyleValue.find(item => rowValue === item.value)
        return item ? item.label : null;
      }
    },
    getData() {
      let queryDialogConfig = this.queryDialogConfig;
      let param = queryDialogConfig.param || {};
      this.$http({
        url: queryDialogConfig.getUrl,
        method: `post`,
        data: param,
        isLoading: true,
        success: res => {
          this.billSetting = res.objx || {};
          let records = [];
          if (queryDialogConfig.isPage) {
            records = res.objx && res.objx.records ? res.objx.records : [];
          } else {
            records = res.objx ? res.objx : [];
          }
          this.rows = records;
        }
      });
    },
    close() {
      this.$emit('update:visiable', false)
    },
    confirm() {

    },
    chooseRow(row) {
      this.$emit('confirm', [row]);
      this.close();
    }
  }
}
</script>

<style scoped lang="scss">
.h5-wrap {
  max-width: 640px;
  margin: auto;

  .header-box {
    background-color: #FFF;
    text-align: center;
    line-height: 46px;
    height: 46px;
    font-size: 16px;
    color: #212121;
    position: relative;

    .go-back {
      position: absolute;
      left: 14px;
      top: 0;
      line-height: 46px;
      font-size: 20px;
    }
  }
}

.pop-addForm {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF;
  z-index: 999;
  //display: none;

  .choose-pro-list {
    border-top: solid 8px #f6f6f6;
    padding: 0 16px;

    .item {
      border-bottom: solid 1px #F2F2F2;
      padding: 12px 24px 12px 0;
      background-size: 8px;
      font-size: 12px;
      position: relative;
      overflow: hidden;

      p {
        width: 50%;
        display: block;
        float: left;
        margin-bottom: 2px;
        color: #888;

        &.name {
          color: #323232;
          font-size: 14px;
          width: 100%;
          margin-bottom: 7px;
          font-weight: 600;

          &:before {
            content: "";
            width: 6px;
            height: 6px;
            background: #2A6494;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            border-radius: 2px;
          }

          span {
            vertical-align: middle;
          }
        }
      }

      &:after {
        content: "\e6e0";
        position: absolute;
        right: 0;
        font-family: element-icons !important;
        margin-top: -10px;
        font-size: 17px;
        color: #c2c2c2;
        top: 50%;
      }
    }
  }
}
</style>
