import React from 'react';
import { FlexAJ } from '../../Component/layout';
import Editors from './Editors';
import Choosen from './Choosen';
import { Popconfirm } from 'antd';


function StageItem({item, templates,saveItems,k, slideItems , deleteStep}){
  
  function onChangevalue(value){
    saveItems(value,item.template_id,item.category,k);
  }
  // 选择模板
  function chooseFunc(content,id,cate){
    saveItems(content,id,cate,k);
  }

  return(
    <div className="stepsItem">
      <FlexAJ className="stepsHead">
        <span>{item.step_name}</span>
        <span className="color-grey-9">
          <Popconfirm
            title={"确定要删除这个步骤吗?"}
            okText="是"
            cancelText="否"
            onConfirm={() => deleteStep(item.id,k)}
          ><a>
            <i className="iconfont icon-lajitong1 font-14"></i></a>
          </Popconfirm>
          <a onClick={()=>slideItems(k,item.hide)}><i className={ (!item.hide || item.hide === false) ? "iconfont icon-sanjiaoxing-down font-14" :"iconfont icon-triangle font-14"}></i></a>
        </span>
      </FlexAJ>
      <div className={(!item.hide || item.hide === false) ? "stepsBody active" : "stepsBody"}>
        <Choosen chooseFunc={chooseFunc} category={item.category} templateId={item.template_id} temp={templates}/>
        <Editors value={item.content} onChange={onChangevalue} theme="vs-dark" height="270px" />
      </div>
    </div>
  )
}
export default StageItem;