<template>
  <ics-dialog title="请选择测试类型" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
    <ics-radio-group v-model="testType">
      <ics-radio v-for="item in typeList" :key="item.id" :label="item.code" card border>
        <span class="test-name">【{{ item.code || '' }}】{{ item.name }}</span>
        <span class="test-type">{{ item.kind }}</span></ics-radio>
    </ics-radio-group>
    <span slot="footer" class="dialog-footer">
      <ics-button @click="handleCancel">取 消</ics-button>
      <ics-button type="primary" @click="handleConfirm">确 定</ics-button>
    </span>
  </ics-dialog>
</template>
<script>
export default {
  props: {
    resolve: {
      type: Function,
      required: true
    },
    reject: {
      type: Function,
      required: true
    },
    typeList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      testType: null
    }
  },
  mounted() {
    this.dialogVisible = true
    // 默认第一个
    if (this.typeList?.length > 0) {
      this.testType = this.typeList[0].code
    }
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false
      done()
      this.reject('用户关闭')
    },
    handleCancel() {
      this.dialogVisible = false
      this.reject('用户取消')
    },
    handleConfirm() {
      if (this.testType) {
        this.dialogVisible = false
        this.resolve(this?.testType)
      } else {
        this.$toast({
          message: '请选择测试类型！'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-radio-group {
  width: 100%;
}

::v-deep .el-radio {
  display: block;
  margin: 10px 0;
  width: 100%;

  &.is-bordered+.el-radio.is-bordered {
    margin-left: 0px;
  }

  .test-name {
    color: #182140;
  }

  .test-kind {
    float: right;
    color: rgba(24, 33, 64, 0.7);
  }
}
</style>
