<template>
  <div class="main"> 
	<div class="tabheadtow clear"><h2 class="title">基本信息</h2></div>
	<tableGrid :info="info" :config="taskData" @selectMaker="selectMaker"></tableGrid>

	<el-card class="mt20">
		<div class="tabheadtow clear"><h2 class="title">任务详情</h2></div>
		<div class="contenter">
			<p v-html="info.content"></p>
		</div>
	</el-card>

	<el-card class="mt20" v-if="!info.confirm">
		<div class="tabheadtow clear"><h2 class="title">接单人</h2></div>

		<task-maker :data="makers" @updateMaker="updateMaker"> </task-maker>
	</el-card>

	<el-card class="mt20">
		<div class="tabheadtow clear"><h2 class="title">操作记录</h2></div>
		<task-log :data="logs"> </task-log>
	</el-card>

	<el-dialog title="选择创客" :visible.sync="selectMakerDialog" center style="margin:0 auto">
		<el-form :model="info" ref="selectMakerDialog" style="width:400px;margin:0 auto;">
			<el-form-item label="选择创客" label-width="100px" prop="type">
        <drop-search :info="info.maker" :type="'maker'" class="user-form-item" @select="okMaker"/>
      </el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="selectMakerDialog = false">取消 </el-button>
			<el-button type="primary" @click="doConfirm" class="pr20 pl20">
				确认
			</el-button>
		</div>
  </el-dialog>
	
  </div>
</template>

<script>
import {getTaskInfo, setTaskMaker} from "@/api/task";
import { toLogStage } from "@/utils/stringFun";
import { toDatetime } from "@/utils/date";
import tableGrid from '@/components/grid/tableGrid.vue';
import TaskLog from './components/TaskLog';
import TaskMaker from './components/TaskMaker';
import config  from './config.js';
import DropSearch from '@/components/select/DropSearch.vue';
export default {
  name: "taskInfo",
  components:{tableGrid,TaskMaker,TaskLog,DropSearch},
  data() {
    return {
			id:0,
			selectMakerDialog:false,
			listLoading:false,
			taskData:config.taskData,
			info: {},
			form:{},
			list:[],
			logs: [],
			makers:[],
    }
  },
  methods: {
		updateMaker(){
			this.getData()
		},
		selectMaker(){
			this.form.id = this.info.id;
			this.selectMakerDialog = true;
		},
		okMaker( item ){
      this.form.maker = item.name
      this.form.maker_id = item.id
    },
		doConfirm(){
			let {id, maker,maker_id} = this.form;
			let param = {user_id:maker_id, task_id: id}
			if( maker =="" || maker_id <1 ) {
				this.$message.errorMsg("还未选择");
				return;
			}
			setTaskMaker(param).then(res=>{
				if( res.code== 0){
					this.info.maker_id = this.form.maker_id;
					this.info.maker = this.form.maker;
					this.selectMakerDialog = false;
					this.$message.successMsg("指定成功", 1);
				}
			})
		},
		async getData(){
			let param = {id: this.id}
			const res = await getTaskInfo( param )
			if (res.code == 200){
				this.info = res.data.info||{}
				this.logs = res.data.logs||[]
				this.makers= res.data.makers||[]
			}
		}
  },
  filters: {
	  toDatetime,
	  toLogStage
  },
  created() {
		this.id = +this.$route.query.id;
		this.getData( )
  }
};
</script>
<style scoped lang="scss">
.warning {
  color: #dc143c;
}
.th{line-height: 28px;}

</style>