<template>
  <div>
    <el-table v-loading="loading" :data="data" style="width: 100%" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="AAA28" label="计划名称" width="180">
        <template slot-scope="scope">
          <el-button class="blue-link" type="text" @click="openAddPlanModal('DETAIL', scope.row)">{{ scope.row.AAA28 }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="" label="进度条" width="220" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
          <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
          <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
          <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
        </template>
      </el-table-column>
      <el-table-column prop="" label="质控计划周期" width="220">
        <template slot-scope="scope">
          <span>2020-10-10</span>&nbsp;至&nbsp;<span>2020-10-10</span>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="appeal_docter" label="发布人" />
      <el-table-column width="160" prop="appeal_time" label="发布时间">
        <template slot-scope="scope">
          <span>{{ scope.row.appeal_time ? moment(scope.row.appeal_time * 1000).format('YYYY-MM-DD HH:MM:ss') :
            ''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="openAddPlanModal('EDIT', scope.row)"></el-button>
          <el-button type="text" style="color:#ef1f3a" icon="el-icon-delete" @click="deleteRow(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddPlanModalBoxVue ref="AddPlanModalBoxVueRef" @onUpdate="$emit('onUpdate')" />
  </div>
</template>

<script>
import moment from 'moment/moment';
import AddPlanModalBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/AddPlanModal.vue'

export default {
  components: {
    AddPlanModalBoxVue
  },
  emits: ['onUpdate'],
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    }
  },
  data() {
    return {
      selectedArray: []
    }
  },
  methods: {
    moment,
    toPage(row) {
      const { ZYH } = row;
      this.$router.push({
        path: '/qc/caseViews', query: {
          ZYH,
          from: 'review'
        }, meta: {
          title: '申诉详情'
        }
      });
    },
    openAddPlanModal(action, row) {
      this.$refs.AddPlanModalBoxVueRef.openModal(action, row)
    },
    deleteRow(row) {
      this.$confirm('确认删除此条数据?', '提示', {
        type: 'warning'
      }).then(() => {
        this.$emit('onUpdate')
      })
    },

    handleSelectionChange(val) {
      this.selectedArray = val;
    }
  },
};
</script>

<style lang="scss" scoped>
// ::v-deep.el-table {
//   .selected-row {
//     background-color:#ecf5ff !important;
//   }
// }

@mixin status() {
  width: 60px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  font-weight: 500
}

.status-0 {
  @include status();
  background-color: #fccbd4;
  border-color: #ef1f3a;
  color: #ef1f3a;
}

.status-1 {
  @include status();
  background-color: #d2e4d6;
  border-color: #318240;
  color: #318240;
}

.status-2 {
  @include status();
  background-color: #ef1f3a;
  border-color: #ef1f3a;
  color: #ffffff;
}

@mixin score-level() {
  font-weight: 500
}

.score-level-1 {
  @include score-level();
  color: #318240;
}

.score-level-2 {
  @include score-level();
  color: #89c30f;
}

.score-level-3 {
  @include score-level();
  color: #ec890e;
}

.score-level-4 {
  @include score-level();
  color: #ef1f3a;
}

.quality-type-1 {
  @include score-level();
  color: #07818a;
}

.quality-type-2 {
  @include score-level();
  color: #3c108f;
}

.quality-type-3 {
  @include score-level();
  color: #a26d0a
}
</style>