<!--
 * @Descripttion: 销售线索-门店任务-任务详情-完成详细信息
 * @version: 1.0.0
 * @Author: 阿羽
 * @Date: 2021-04-13 17:57:01
 * @LastEditors: 阿羽
 * @LastEditTime:  2021-04-13 17:57:01
 -->
<!--
  <salesleads-taskinfo :item="item"></salesleads-taskinfo>
  import salesleadsTaskinfo from '@/components/review/salesleads-task-info.vue';
 -->
<template>
  <el-dialog title="完成详情" :visible.sync="dialogVisible" width="600px" @close="close">
    <div class="">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-form">
        <el-form-item label="完成时间" prop="overdueTime"> {{ form.finishTime | formatTimeStamp }}</el-form-item>
        <el-form-item label="备注" prop="finishRemark"> {{ form.reason || '' }} </el-form-item>
        <el-form-item label="图片" prop="imgUrl">
          <template v-for="item in form.taskUrls">
            <el-popover placement="right-start" :open-delay="200" width="300" trigger="hover" :key="item">
              <img style="display:block;width:100%" :src="item" alt="" />
              <el-image slot="reference" style="width: 40px; height: 40px" :src="item" fit="cover"></el-image>
            </el-popover>
          </template>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    taskData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {},
  data() {
    return {
      dialogVisible: true,
      form: {
        finishTime: null,
        reason: '',
        taskUrls: []
      }
    };
  },
  methods: {
    close() {
      this.$emit('close');
    }
  },
  watch: {
    taskData(newData) {
      const that = this;
      if (Object.keys(newData).length) {
        that.$nextTick(() => {
          that.form = JSON.parse(JSON.stringify(newData));
        });
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.taskData).length) {
      that.$nextTick(() => {
        that.form = JSON.parse(JSON.stringify(that.taskData));
      });
    }
  }
};
</script>
<style lang="scss" scoped>
>>> .el-dialog__header {
  padding: 19px 28px;
}
>>> .el-dialog__body {
  padding-top: 10px;
}
>>> .el-form-item {
  margin-bottom: 0;
  .el-form-item__label {
    line-height: 30px;
  }
  .el-form-item__content {
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 30px;
  }
  .el-popover__reference {
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 4px;
  }
}
</style>
