<template>
  <div class="device-cost">
    <table border="1" style="width:100%;">
      <tr style="background-color:#f8f8f9">
        <td></td>
        <td>序号</td>
        <td>设备名称</td>
        <td>出厂编号</td>
        <td>规格型号</td>
        <td>品牌</td>
        <td style="min-width: 120px;">折旧成本（天）</td>
        <td style="min-width: 80px;">预算天数</td>
        <td style="min-width: 80px;">金额</td>
        <td style="min-width: 80px;" class="adjust">核算天数</td>
        <td style="min-width: 80px;" class="adjust">核算金额</td>
      </tr>
      <tr v-for="device, index in deviceList" :key="'device' + device.deviceId">
        <td>
          <div class="delete-btn" v-if="device.days == 0 && taskName == '核算编制'" @click="removeDevice(device, index)">
            <i class="el-icon-remove-outline" style="color:#F56C6C"></i>
          </div>
        </td>
        <td>{{ index + 1 }}</td>
        <td>{{ device.device ? device.device.name : '' }}</td>
        <td>{{ device.device ? device.device.code : '' }}</td>
        <td>{{ device.device ? device.device.series : '' }}</td>
        <td>{{ device.device ? device.device.brand : '' }}</td>
        <td style="text-align:right;">{{ device.device ? device.device.dayCost : '' }}</td>
        <td style="text-align:right;">{{ device.days }}</td>
        <td style="text-align:right;">{{ device.amount }}</td>
        <td style="text-align:right;">
          <template v-if="taskName === '核算编制'">
            <el-input-number :controls="false" style="width:100%;" v-model="device.daysAdjust"
              @change="handleChange(device)"></el-input-number>
          </template>
          <span v-else>{{ device.daysAdjust }}</span>
        </td>
        <td style="text-align:right;">
          {{ device.amountAdjust }}
        </td>
      </tr>
      <tr>
        <td colspan="6" class="amount">设备成本合计</td>
        <td class="amount" style="text-align:right;">{{deviceList.reduce((sum, device) => sum + (Number(device.device ?
          device.device.dayCost : 0) || 0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{deviceList.reduce((sum, device) => sum + (Number(device.days) ||
          0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{deviceList.reduce((sum, device) => sum + (Number(device.amount) ||
          0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{deviceList.reduce((sum, device) => sum +
          (Number(device.daysAdjust) || 0), 0).toFixed(2)}}</td>
        <td class="amount" style="text-align:right;">{{deviceList.reduce((sum, device) => sum +
          (Number(device.amountAdjust) || 0), 0).toFixed(2)}}</td>
      </tr>
    </table>
    <div class="mt10" v-if="taskName === '核算编制'">
      <el-button type="success" plain icon="el-icon-plus" @click="openDevice" size="mini">新增设备</el-button>
    </div>
    <!-- 选择设备对话框 -->
    <el-dialog title="选择设备" :visible.sync="isOpenDevice" width="700px" append-to-body>
      <choose-device @chooseList="getChooseDevice"></choose-device>
    </el-dialog>
  </div>
</template>

<script>
import ChooseDevice from '../../components/chooseDevice.vue'

export default {
  name: 'DeviceCost',
  components: {
    ChooseDevice
  },
  props: {
    deviceList: {
      type: Array,
      default: () => []
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isOpenDevice: false
    }
  },
  methods: {
    handleChange(device) {
      device.amountAdjust = (Number(device.device.dayCost) * Number(device.daysAdjust)).toFixed(2);
      this.$emit('update:deviceList', this.deviceList);
    },
    openDevice() {
      this.isOpenDevice = true;
    },
    removeDevice(device, index) {
      this.$confirm('确定移除【' + device.device.name + '】吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let arr = this.deviceList;
        if (arr.length == 1) {
          return;
        }
        if (index >= 0 && index < arr.length) {
          arr.splice(index, 1);
        }
        this.$emit('update:deviceList', this.deviceList);
      }).catch(() => { });
    },
    getChooseDevice(val) {
      let arr = [];
      for (let device of val) {
        let obj = {
          deviceId: device.deviceId,
          device: device,
          days: 0,
          depreciation: device.dayCost,
          amount: 0,
          daysAdjust: 0,
          amountAdjust: 0,
        }
        arr.push(obj);
      }
      this.deviceList.push(...arr);
      this.isOpenDevice = false;
      this.$emit('update:deviceList', this.deviceList);
    }
  }
}
</script>

<style lang="scss" scoped>
.device-cost {
  table {
    text-align: center;
    border-collapse: collapse;
    margin: 0 auto;

    td {
      padding: 5px;
    }
  }

  .adjust {
    color: #F56C6C;
    width: 120px;
  }

  .delete-btn {
    cursor: pointer;
    font-size: 18px;
  }

  .amount {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
  }
}
</style>